Shinji-san Shinji-san - 5 months ago 9
HTML Question

Full Height Navigation Bar Strange Error

Ok so I made ul height 100% and li a to block level but for some reason I cannot get my vertical navigation to be full height. Well, really I want it to stop right at the footer. So here's the code: I put background-color on the ul but it's not going to the bottom for some reason

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>


Would anybody be able to spot the problem?

Answer

To accomplish exactly what you're looking for (stopping the vertical navigation right before the footer, you'll need to combine a couple different styles. Your original issue is most likely that there's a parent element between the html, body that needs to have 100% height added. Luckily there's a more efficient way now. Add the following to the #nav styling:

#nav {
  height: 100vh;
}

This will make the nav 100% of the viewport height. To accommodate the footer, as well, update to the following code:

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

This calculates the difference between the full screen height and the height of the footer, which is currently 174px. Here's an updated fiddle: https://jsfiddle.net/44655gw4/1/