30-seconds-of-code/last-item-with-remaining-available-height.md at 11eff23e47b0cf8b0af706090127ebf3685ace3f

Files

atomiks 11eff23e47 Autoscoping (#103 )

* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction

2018-10-05 09:18:51 +10:00

1.1 KiB

Raw Blame History

Last item with remaining available height

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

Explanation

height: 100% set the height of container as viewport height.
display: flex enables flexbox.
flex-direction: column set the direction of flex items' order from top to down.
flex-grow: 1 the flexbox will apply remaining available space of container to last child element.

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.

https://caniuse.com/#feat=flexbox

1.1 KiB Raw Blame History