The navigation bar in my webpage (below) only takes up a small part of the vertical, but I want it to take up the entire vertical. In the CSS file (below) in the.sidenav class I set the height property to 100%, which I thought would solve the problem, but it didn't.
This is my html body (ignore what's between the {% %} that is Django syntax)
{% extends "myapp/layout.html" %}
{% block body %}
<ul class="sidenav">
<li><a id="active" href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
{% endblock %}
Here is my CSS
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidenav {
overflow: hidden;
background-color: #b3b3b3;
width: 10%;
height: 100%;
}
.sidenav a {
color: #f2f2f2;
text-align: center;
padding: 20px 30px;
text-decoration: none;
font-size: 17px;
display: block;
}
.sidenav a:hover {
background-color: #e6e6e6;
color: black;
}
.sidenav a#active {
background-color: #4d4d4d;
color: white;
}
Try using vh(viewport height) as height unit:
.sidenav{
min-height: 100vh
}
The solution is to say
height: 100vh;
If you set height to 100%, it will orientate on the parent(root) therefore you would have to set
html{height: 100%}
You can also do the following:
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
I share a codesandbox with your complete code
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.