Get a sidebar with responsive height between a fixed navbar and a footer

Question

I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:

1. a fixed navbar at the top,
2. a main area
3. 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

Answer 1

Here problem your css code.

just replace.main class code below

.main {
    min-height: calc(100vh - 150px);
    position: relative;
}

Answer 2

Without changing your markup, you can use Flexbox to get the layout you want:

 html, body { height: 100%; width: 100%; margin: 0; } body { display: flex; flex-direction: column; }.navbar { background-color: grey; flex-basis: 50px; padding: 5px; }.footer { background-color: blue; flex-basis: 100px; padding: 5px; }.main { flex-grow: 1; display: flex; }.sidebar { flex-basis: 10%; background-color: orange; padding: 5px; }.content { padding: 5px; }

 <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"> Footer </div>

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox | CSS-Tricks

If you were willing to change your markup, or use display:contents on your main element, you could use Grid layout instead.

 html, body { height: 100%; width: 100%; margin: 0; } body { display: grid; grid-template-columns: 10% 1fr; grid-template-rows: 50px 1fr 100px; grid-template-areas: "navbar navbar" "sidebar content" "footer footer"; }.navbar { background-color: grey; padding: 5px; grid-area: navbar; }.footer { background-color: blue; padding: 5px; grid-area: footer; }.main { display: contents; }.sidebar { background-color: orange; padding: 5px; grid-area: sidebar; }.content { padding: 5px; grid-area: content; }

 <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"> Footer </div>

CSS Grid Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Grid | CSS-Tricks