전체 높이 탐색 막대 이상한 오류

좋아, 그래서 높이를 100 %로 만들었고 레벨을 차단하려고했지만 어떤 이유로 수직 탐색을 전체 높이로 만들 수 없습니다. 글쎄, 정말로 바닥 글에서 멈추고 싶다. 그래서 여기 코드는 다음과 같습니다 나는 UL에 배경 색상을 넣어하지만전체 높이 탐색 막대 이상한 오류

html { 
    height: 100%; 
} 

body{ 
    height: 100%; 
    margin: 0; 
    font-family: courier; 
    font-size: 19px; 
} 

* { 
    margin: 0; 
} 

#pagewrap { 
    min-height: 100%; 
    margin-bottom: -174px; 
} 

#pagewrap:after { 
    content: ""; 
    display: block; 
} 

#footer, #pagewrap:after { 
    height: 174px; 
} 

.sub:last-child { 
    border: 0px; 
} 

#footer { 
    background-color: #00e600; 
} 

.wrap { 
    margin: 0 auto; 
    width: 100%; 
    display: flex; 
    align-items: center; 
} 

.sub { 
    padding: 12px; 
    width: 32%; 
    height: 150px; 
    background: #00e600; 
    color: white; 
    border-right: solid white 1px; 
} 


.sub:last-child { 
    border: 0px; 
} 

#nav { 
    list-style: none; 
    font-weight: bold; 
    margin-bottom: 10px; 
    width: 10%; 
    text-align: center; 
    background-color: brown; 
    padding-right: 20px; 
} 

#nav ul { 
    list-style-type: none; 
    height: 100%; 
    margin: 0px; 
    padding: 0; 
    overflow: auto; 
    background-color: brown; 
} 

#nav li { 
    margin: 0px; 
} 

#nav li a { 
    padding: 10px; 
    display: block; 
    text-decoration: none; 
    font-weight: bold; 
    color: pink; 
    background-color: brown; 
} 

#nav li a:hover { 
    color: white; 
    text-shadow: 2px 2px 4px white; 
} 

<body> 
    <div id="pagewrap"> 
     <div id="nav"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Works</a></li> 
       <li><a href="#">About</a></li> 
      </ul> 
     </div> 
    </div> 

<!-- 
<footer id="footer"> 

</footer> 

--> 


<div id="footer"> 
    <div class="wrap"> 
     <div class="sub">Lorem Ipsum</div> 
     <div class="sub">Lorem Ipsum </div> 
     <div class="sub">Lorem Ipsum </div> 
    </div> 
</div> 
</body>

아무도 문제를 발견 할 수 있을까 어떤 이유로 바닥에 없을거야?

출처

2016-06-17 Shinji-san

jsfiddle는 어디에 있습니까? – DanielGatti

수정되었습니다. OP에 있습니다. 감사합니다 –

https://jsfiddle.net/xjosdhjh/ –

바닥 글 바로 앞에있는 세로 탐색을 중지하려면 몇 가지 스타일을 결합해야합니다. 원래 문제는 대부분 html, body 사이에 상위 요소가있을 가능성이 큽니다. . 100 % 높이가 다행히 더 효율적인 방법이 지금 거기에 추가에 추가하여 #nav 스타일에 다음과 같은 :..

#nav { 
    height: 100vh; 
}

이 뷰포트 높이의 nav 100 %를 만들 것뿐만 아니라, 바닥 글을 수용하기 위해, 다음 코드로 업데이트하십시오.

#nav { 
    height: calc(100vh - 174px); 
}

전체 화면 높이와 바닥 글의 높이 (현재는 174 픽셀) 사이의 차이를 계산합니다. 업데이트 된 바이올린은 다음과 같습니다. https://jsfiddle.net/44655gw4/1/

출처

2016-06-17 02:35:04

감사합니다. nav와 바닥 글 사이의 틈을 막는 방법이 있습니까? –

실제로 있습니다. #nav 요소에서 'margin-bottom : 10px;'스타일을 삭제하면됩니다. 업데이트 된 바이올린은 다음과 같습니다. https://jsfiddle.net/44655gw4/2/ –

전체 높이 탐색 막대 이상한 오류

답변

관련 문제