イメージ全体のヘッダーサイズを取らない

3つのイメージで構成されるスライダを作成したいが、問題に直面している。私は頭の上に画像を配置するイメージ全体のヘッダーサイズを取らない

... 私はナビゲーションバーの高さを作った：0、ヘッダ上のナビゲーションバーを置くためには...

あなたがコードを見ることができ、および画像う私はあなたの秒の表示特性に応じて正確に

$('.header').height($(window).height());

.my-navbar 
 
{ 
 
    
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
     
 

 
       <div class="my-navbar"> 
 
        <div class="my-container"> 
 
          <div class="user"> 
 
           <i class="fa fa-user-circle-o" aria-hidden="true"></i> 
 
           <a href="#" class="upper">login</a> 
 
           <span class="separator">|</span> 
 
           <a href="#" class="upper">register</a> 
 
          </div> 
 
          <div class="clearfix"></div> 
 
          <div class="social"> <!-- social and search icon--> 
 
           <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
 
           <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
 
           <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
 
           <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
 
            <a href="#"><i class="fa fa-search" aria-hidden="true"></i></a> 
 

 
          </div> 
 
          <div class="clearfix"></div> 
 
          <div class="links upper txcolor"> 
 

 
           <a href="#">news</a> 
 
           <span>|</span> 
 
           <a href="#">download</a> 
 
           <span>|</span> 
 
           <a href="#">usefull links</a> 
 

 

 
          </div> 
 

 
         </div> 
 
      </div> 
 
     
 
     
 
     
 
     <div class="header"> 
 
      
 
     
 
      
 

 
      <!--<div class="slider"> 
 
       <div class="my-container"> 
 
        
 
        
 
         <div class="slider-images"> 
 
          
 
        
 
         
 
         </div> 
 

 
        <div class="slider-text"> 
 
        <h3>Four Wheels move the body</h3> 
 
        <h1> Two wheels move the soul</h1> 
 
         
 
        </div> 
 
        
 

 
        
 

 
       
 
       
 
       </div> 
 
      </div> --> 
 
      
 
    
 
      <img src="images/motors/m1.png"> 
 
     </div> 
 
     
 
     
 
    
 
     
 
     
 
     <div class="menu"> 
 
     
 
       
 
       <img src="images/logo.png" > 
 
      
 

 
     
 
     </div>

出典

2016-11-05 Saif Obeidat

に変更する必要があります。デフォルトでは、画像サイズも設定する必要があります。 – TheValyreanGroup

私はそれを高めます：100％。幅：100％、ナットは動作しません –

.header用のCSSはありますか？ – TheValyreanGroup

.slider { 
    height: 100vh; 
    width: 100%; 
    background-position: 50% 50%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-attachment: fixed; 
    padding: 0; 
    margin: 0; 
}

必要なものをお見せライダーの場合は、display:table;

出典

2016-11-05 21:56:36

イメージ全体のヘッダーサイズを取らない

答えて

関連する問題