Get a sidebar with responsive height between a fixed navbar and a footer
I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:
- a fixed
navbarat the top, - a
mainarea - a footer at the bottom of the page (not sticky).
In the main area I want to create a sidebar that is between the navbar and the footer.
Here is one of my attempts
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: grey;
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.main {
padding-top: 50px;
min-height: calc(100vh - 150px);
}
.footer {
background-color: blue;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar {
height: 100%;
width: 10%;
position: absolute;
z-index: 1;
left: 0;
background-color: orange;
overflow-x: hidden;
}
.content {
margin-left: 10%;
}<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
Vestibulum sed lectus nisi.
Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis
quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non
ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar
sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non
pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras
lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
</div>Unfortunately the sidebar does not reach the footer. If I use position: "absolute"; it covers the footer. I also tried using two div side by side with flex, but without success.
How can I get a sidebar that adapts to the content of the main (between navbar and footer), ensuring that the main has a minimum height of 100vh - 150px to keep the footer at the bottom of the page?
Any help is greatly appreciated
Here problem your css code.
just replace .main class code below
.main {
min-height: calc(100vh - 150px);
position: relative;
}