반응 형 레이아웃에서 높이 지정

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

반응 형 디자인의 요소에 불필요한 높이가있는 경우 은 다른 화면 해상도에서 내용이 넘치게되므로 일반적으로 높이를 지정하지 말고 내용으로 요소의 높이를 지정하게하는 것이 좋습니다.

그런데 항상 요소 높이를 수동으로 지정해야하는 상황이 있습니다 (일반적으로 이러한 상황은 다른 콘텐츠가없는 요소에 배경 이미지를 지정할 때와 같이 요소가 고유 높이가없는 경우이지만 다른 경우가 있음)).

예외는 규칙을 증명합니다. 반응 형 사이트를 개발할 때는 결론을 내리십시오. 은 높이를 지정하지 않아야합니다. :)이 아닌 한.