完全な高さのナビゲーションバー奇妙なエラー

私はulの高さを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/ –

フッタの直前で垂直方向のナビゲーションを停止するには、2つの異なるスタイルを組み合わせる必要があります。最初の問題は、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/ –

完全な高さのナビゲーションバー奇妙なエラー

答えて

関連する問題