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

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

a fixed navbar at the top,
a main area
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 >
  Navbar
</div>
<div >
  <div >
    Sidebar
  </div>
  <div >
      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 >
</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

CodePudding user response：

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 >
  Navbar
</div>
<div >
  <div >
    Sidebar
  </div>
  <div >
    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 >
  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 >
  Navbar
</div>
<div >
  <div >
    Sidebar
  </div>
  <div >
    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 >
  Footer
</div>

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

CodePudding user response：

Here problem your css code.

just replace .main class code below

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