CSS to fit sidebar under topbar - html

Question

I need to create an empty topbar and an empty sidebar as below. I want to stack them neatly so that the top of the sidebar touches the bottom of the topbar. For that, I am using percentage. However, I just can't get them to do that.
I saw some other threads suggesting to set html and body with height: 100%; and width : 100%. But in my app, the layout below is not in the main html document.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 0;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>

Answer 1

Your #nav-bar has a height: 10%, and you can set the same value for the top rule, selector #side-bar.
#nav-bar {
position: absolute;
top: 0;
left: 0;
background-color: blue;
height: 10%;
width: 100%;
}
#side-bar {
position: absolute;
top: 10%;
left: 0;
background-color: #011a21;
height: 90%;
width: 7.5%;
/*margin-top: 10%;*/
}
<div id="nav-bar"> </div>
<div id="side-bar"></div>

Answer 2

I tend to use flex box for this, Maybe grid would be smarter though. I took also care of some scrolling things. Using min with and height 0 on flex parents is key for that.
body,
section {
min-height: 0;
min-width: 0;
}
body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
height: 2rem;
background: green;
}
section {
flex: 1 1 0%;
display: flex;
}
aside {
width: 4rem;
background: blue;
height: 100%;
}
main {
background: pink;
flex: 1 1 0%;
overflow: auto;
padding: 1rem;
}
div {
border: 1px black dashed;
height: 300%;
}
<nav></nav>
<section>
<aside></aside>
<main>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, tempora. Voluptates, iure quis enim hic eius ullam sequi suscipit maiores, eum consectetur nesciunt quae dolorum! Voluptate adipisci praesentium illum dolorem.
<br>
</div>
</main>
</section>