J. Doe J. Doe - 6 months ago 10
HTML Question

How to stick the footer to bottom and stretch sidebar and content divs to the footer?

How do I stick the footer to the bottom of the screen and stretch sidebar and content divs to the footer? Is it possible without using JavaScript? I have found ways to stick the footer to bottom, but I don't know how to make the sidebar equal i size to the content if it has less text.

If the height of the content is more than the viewport height, scroll bars should appear.

What I need

Answer

There are a number of ways to do this; the CSS 'vh' and 'vw' units may be the simplest, especially if you have a fixed-height header and/or footer:

body{margin:0}
div {border: 1px solid;box-sizing: border-box; background-color:#EEE}

.container {width: 100vw; height: 100vh}

.header, .footer {width: 100vw; height: 60px}

.sidebar, .body {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.sidebar {width: 20%; float:left}
.body {width: 80%; float:right}
<div class="container">
  <div class="header">HEADER</div>
  <div class="sidebar">SIDEBAR</div>
  <div class="body">BODY</div>
  <div class="footer">FOOTER</div>
</div>

Alternatively, flexbox:

body {
  margin: 0;
  box-model: border-box
}
div {
  border: 1px solid;
  background-color: #EEE
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column
}
.innercontainer {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
}
.body {
  flex-grow: 1
}
.sidebar,
.body {
  overflow-y: scroll
}
<div class="container">
  <div class="header">HEADER</div>
  <div class="innercontainer">
    <div class="sidebar">SIDEBAR</div>
    <div class="body">BODY</div>
  </div>
  <div class="footer">FOOTER</div>
</div>