JSFiddle - React, Tailwind, and code Playground

CSS für Loval

by Andres Abadia

HTML

<section>
  <header>
    header: sized to content
      <br/>(but is it really?)
  </header>
  <div id="div1">
    main content: fills remaining space<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- uncomment to see it break -->
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>
    <!-- -->
  </div>
  <footer>
    footer: fixed height in px
  </footer>
</section>

CSS

html, body{
  height:100%;
  margin:0;
}

section {
  display: flex;
  flex-flow: column;
  height: 100%;
}
header {
  background: tomato;
  height:100px;
}
#div1, #div2{
  flex: 2 ;
  background: gold;
  overflow: auto;  
}
#div1 {
}
#div2 {
  width:80%;
}
footer {
  background: lightgreen;
  min-height: 60px; 
}