JSFiddle - React, Tailwind, and code Playground

loval aufbau

by Andres Abadia

HTML

<div id="container">
  <div id="header">
    HEADER
  </div>
  <div id="content">
    <div id="content-1">  
      <div id="content-1-1">
        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>
    </div>
    <div id="content-2">
    </div>
  </div>
  <div id="footer">
    FOOTER
  </div>
</div>

CSS

* { box-sizing: border-box; }

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

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

#header {
  min-height: 50px;
  background-color: #A3E4D7;
  }

#content {
  display: flex;
  flex-grow: 1;
  background-color: #D1F2EB;
  }

#content-1, #content-2 {
  height: 100%;
}

#content-1 {
  background-color: #FAD7A0;
  width: 20%;
}

#content-2 {
  background-color: #F5CBA7;
  width: 80%;
}

#footer {
  min-height: 30px;
  background-color: #A9DFBF;
  }