レスポンシブなレイアウトで高さを指定する

Question

私はオンラインで読んでいましたが、高さを設定すべきではないと言っている数多くのブログと「プロフェッショナル」が出てきました。まず第一に..なぜですか？

また、top：0で絶対位置または固定位置を使用せずに高さを指定しないと、私の背景色を私のヘッダーに表示することができます。ここで

は私のコードです：

HTML：

<header> 
    <div class="row-std"> 
     <div class="logo"> 
      <img src="images/logo.png"> 
     </div> 

     <nav> 
      <ul id="navbar"> 
       <a href="#"><li class="nav-item">LINK 1</li></a> 
       <a href="#"><li class="nav-item">LINK 2</li></a>  
       <a href="#"><li class="nav-item">LINK 3</li></a>  
       <a href="#"><li class="nav-item">LINK 4</li></a>  
       <a href="#"><li class="nav-item">LINK 5</li></a>     
      </ul> 
     </nav> 
    </div> 
</header> 

CSS：あなたは、ヘッダーが現在トップ財産で絶対位置を持って見ることができるように

header { 
    width: 100%; 
    background: #2f3842; 
    position: absolute; 
    top: 0; 
} 
header div.logo img { 
    float: left; 
    width: 20em; 
    margin-top: 1.5em; 
    margin-left: 1em; 
} 

header nav { 
    float: right; 
} 
header nav ul#navbar a { 
    text-decoration: none; 
    list-style-type: none; 
    color: #ebebeb; 
    border: 0; 
    transition-duration: .25s; 
    -webkit-transition-duration: .25s; 
} 
header nav ul#navbar a:visited { 
    color: #ebebeb; 
} 
header nav ul#navbar a:hover, header nav ul#navbar a:active { 
    color: #16a085; 
} 
header nav ul#navbar .nav-item { 
    display: inline-block; 
    padding: 0.3125em 0.3125em; 
    margin: 2.5em 1em; 
    font-size: 0.84em; 
    font-weight: 600; 
} 

値は '0'です。これは、ヘッダーに背景色を表示させ、その内容によってその高さの点で要素を塗りつぶすことができるようにするために機能しますが、もし私がこれの下の別の要素を表示しようとしていたのであれば、おそらく5.5emのマージントップを使って要素を正しい位置に押し込んでうまく動作しますが、これは固い感じです。これを行うためのより良い方法がありますか？

Answer 1

レスポンシブデザインの要素に不必要な高さがあるは、さまざまな画面解像度でコンテンツがオーバーフローします。一般に、高さを指定せず、コンテンツの要素の高さを指定することをお勧めします。

要素の高さを手動で指定する必要がある場合があります（通常、このような状況では、他のコンテンツのない要素に背景イメージを指定する場合のように、要素の内在する高さはありませんが、 ）。

例外はルールを証明します。応答性の高いサイトを開発する際のボトムライン、は高さを指定していません...あなたが :)を持っていない限り。