HTML Element Style How to - Place TABLE element for 100% height of a min-height div container

Question

We would like to know how to place TABLE element for 100% height of a min-height div container.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--from  w w  w  .  j  a  va2 s .c o m-->
  min-height: 400px;
  height: 400px;
  background: yellow
}

table {
  background: pink;
  height: 100%;
  width: 100%;
}
</style>
</head>
<body>
  <div>
    <table>
      <tr>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
      </tr>
    </table>
  </div>
</body>
</html>

The code above is rendered as follows: