CSS para impacientes

CSS como usar o Last item with remaining available height

January 04, 2020

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

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

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

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

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

⚠️ Needs prefixes for full support.

Acesse a Referência original