layout-fiddle

by OysteinAmundsen

HTML

<!--
  How can the top row have a fixed height only until it is constrained by the viewport?
  When ".rows" exceeds viewport, ".auto" should shrink  
  
  Answer: Use grid-layout.
  Bonus: There's no need to nest the .auto and .content elements. The HTML also would benefit from 
         using more semantic elements than just <div>'s.'
-->

<section><!-- .row -->
  <div><!-- .auto + .content -->
    I should shrink when constrained by the viewport
  </div>
  <footer>I should always be visible</footer><!-- .fixed -->
</section>

CSS

html, body {
  height: 100%;
}

body {
  background: #202227;
  padding: 10px;
}

* {
  box-sizing: border-box;
}

section {
  width: 100%;
  display: grid;
  grid-template-rows: auto 40px;
  align-items: center;
  text-align: center;
  color: white;
  border: 2px solid #f3cb63;
  padding: 10px;
  min-height: 100%;
}

section div {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer {
  background: #37393d;
  margin: 0 -10px -20px -10px;
  padding: 10px;
}