全高导航栏奇怪的错误

Question

好的，所以我将 ul 高度设置为 100%，并将 li a 设置为块级别，但出于某种原因，我无法将垂直导航设置为全高。好吧，我真的希望它停在页脚处。所以这是代码：我在 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>

有人能找出问题所在吗？

Answer 1

为了准确地完成您正在寻找的内容（在页脚之前停止垂直导航，您需要组合几种不同的样式。您最初的问题很可能是 [= 之间有一个父元素12=] 需要添加 100% 高度。幸运的是现在有更有效的方法。将以下内容添加到 #nav 样式：

#nav {
  height: 100vh;
}

这将使 nav 视口高度的 100%。要同时容纳页脚，请更新为以下代码：

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

这里计算的是全屏高度和页脚高度的差值，目前是174px。这是更新后的 fiddle：https://jsfiddle.net/44655gw4/1/

全高导航栏奇怪的错误

Full Height Navigation Bar Strange Error

html

css

navigation

height