好的，所以我将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>
有人能够发现问题吗？
要完成您要查找的内容(在页脚之前停止垂直导航)，您需要组合几种不同的样式。您的原始问题很可能是html, body之间有一个父元素需要添加 100% 的高度。幸运的是，现在有一种更有效的方法。将以下内容添加到#nav样式中：
#nav {
height: 100vh;
}
这将使nav视口高度达到 100%。若要容纳页脚，请更新为以下代码：
#nav {
height: calc(100vh - 174px);
}
这将计算全屏高度和页脚高度之间的差异，当前为 174px。这是一个更新的小提琴：https://jsfiddle.net/44655gw4/1/