Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport.
Here's the HTML:
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Option 1 <br>
Option 2 <br>
</div>
</div>
CSS Code:
html, body {
background-color: grey;
margin: 0;
heigth: 100%;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
heigth: 20px;
margin: 0;
}
.content {
position: absolute;
width: 100%;
heigth: 100%;
}
.sidebar {
width: 15%;
position: absolute;
background-color: grey;
border-right: 2px solid;
}
.editor {
position: absolute;
width: 84.5%;
right: 0;
background-color: grey;
}