JSFiddle - React, Tailwind, and code Playground

HTML

<section id="blad">
  <div id="content">
    <table>
      <tr>
        <th>awdawwwfa</th>
        <th>awdawwwfa</th>
        <th>awdawwwfa</th>
      </tr>
      <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
      <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
      <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
            <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
            <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
            <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
            <tr>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
        <td>awdawwwfa</td>
      </tr>
    </table>
    <div style="height:60px"></div>
  </div>

  <div id="footer">
    All rights reserved.
  </div>
</section>

CSS

#content {
  background: #ff0000;
  position: relative;
  /* braucht es für die Footer Position*/
  height: auto !important;
  /* normale Browser */
  height: 100%;
  /* IE6: setzt dies wie min-height um*/
  min-height: 100%;
  /* normale Browser */
  overflow: scroll;
}

html,
body {
  height: 100%;
}

#footer {
  background: blue;
  color: white;
  height: 50px;
  width: 100%;
  position: fixed;
  bottom: 0px;
}

#blad {
  margin: 0;
  position: absolute;
  bottom:10px;
  left: 70px;
  right: 10px;
  top:10px;
  padding: 0;
  height: 100%;
  /* braucht es für die min-height des Containers */
}