ChrisInCambo ChrisInCambo - 2 months ago 5
HTML Question

Can this be done without tables or JavaScript: 100% height wills remaining height of container

Is it possible to make a none table based layout that allows #bottom element to fill 100% of the remaining space left in the parent element without the use of JavaScript?

Here is what works when using tables:

<html>
<head>
<style>
table{
height: 100%;
width: 100%;
}

#top{
background-color: blue;
height: 200px;
}

#bottom{
background-color: red;
height: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="top">
<td></td>
</tr>
<tr id="bottom">
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

Answer
<html>
  <head>
    <style>
    * { padding: 0px; margin: 0px; }
    body {
      height: 100%;
    }
    #main {
      height: 100%;
      width: 100%;
      position: relative;
    }
    #top{
      background-color: blue;
      height: 200px;
    }
    #bottom{
      background-color: red;
      position: absolute;
      bottom: 0px;
      top: 200px;
      left: 0px;
      right: 0px;
    }               
    </style>
  </head>
  <body>
    <div id="main">
      <div id="top">
      </div>
      <div id="bottom">
      </div>
    </div>
    </body>
</html>

You don't really need #main, I just like to keep my stuff contained unnecessarily.

Comments