HTML5 탐색 태그가 예상대로 작동하지 않는 이유는 무엇입니까?

다음 코드에서 nav 태그는 예상 한 것처럼 동작하지 않습니다. (페이지의 아래쪽에 맞 춥니 다.) 방화 광에서 오버 플로우가 발생한 후에도 nav가 표시되지 않습니다. 스타일. 그러나 내가 위치를 적용하면 : 절대, 하단 : 0 ul 작동합니다. 왜 이런 일이 발생합니까? nav는이 컨텍스트에서 유용하지 않은 것처럼 보입니다.HTML5 탐색 태그가 예상대로 작동하지 않는 이유는 무엇입니까?

HTML :

<!DOCTYPE HTML> 
<html> 
<body> 
    <header> 
     <nav> 
      <ul> 
       <li><a href="index.html">about us</a></li> 
       <li><a href="portfolio">porfolio</a></li> 
       <li><a href="contact">contact us</a></li> 
      </ul>   
     </nav>  
    </header> 
</body> 
</html>

CSS :

header { 
    background: url(../img/header-bg.jpg) left top no-repeat; 
    background-size: 100% 100%; 
    min-height: 400px; 
    position: relative; 
    } 

/* navigation */ 
nav { 
    text-align:center; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    border-bottom: 2px solid #72aa21; 
    position: absolute; 
    bottom: 0; 
    } 
nav ul { 
    display:inline-block; 
    } 
nav li { 
    display: inline; 
    } 
nav ul li a { 
    line-height: 2.6em; 
    padding: 0 1.5em; 
    display: inline-block; 
    position: relative; 
    margin: 0 .5em; 
    padding-left: 1.6em; 
    }

출처

2012-06-18 viktor

당신의 당신이 그에게로 <nav> 실제로 하단에 위치합니다. 그러나 높이가 100 %이고 내용이 맨 위에 있습니다.

그냥 height: 100%를 제거하고 당신은 괜찮을 것 : http://jsfiddle.net/qHvB4/

출처

2012-06-18 19:17:05 bfavaretto

가도 높이없이 브라우저에서 작동하지 않습니다 : 100 %; 내가 방화범에서 말했듯이 검사 요소와 함께 나타나지 않습니다, 그리고 왜 이해하지 못합니다/ – viktor

jsfiddle 내가 연동되지 않습니다 중 하나를 작동합니까? 브라우저에서 자신의 코드 일 뿐이라면 코드를 다시 확인하십시오. html은 아마도 어느 시점에서는 유효하지 않을 것입니다. – bfavaretto

나는 그것을 알아 냈다. 당신이 옳았어요, 그건 내 코드에서 문제 였어. min-height는 position 다음에 정의되었습니다. relative로 설정하면 position 속성이 다르게 동작합니다. 이제는 똑같은 문제로 ppl로 향합니다. – viktor

HTML5 탐색 태그가 예상대로 작동하지 않는 이유는 무엇입니까?

답변

관련 문제