30 seconds of CSS

  Back to Home

Last item with remaining available height  layout

Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.

HTML
<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>
CSS
html,
body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}
Demo
Div 1
Div 2
Div 3
Explanation
  1. height: 100% set the height of container as viewport height.
  2. display: flex enables flexbox.
  3. flex-direction: column set the direction of flex items' order from top to down.
  4. flex-grow: 1 the flexbox will apply remaining available space of container to last child element.
  5. The parent must have a viewport height. flex-grow: 1 could be applied to the first or second element, which will have all available space.
Browser support

100.0%

⚠️ Needs prefixes for full support.