How to create dynamic horizontal layout in pure HTML / CSS without JS?

Question

Take a look at this example: http://jsbin.com/ixiju4/2/edit

I have a shell whose height is defined and two containers inside: top and bottom . The height of the top container is not fixed (in the example, it is set to 100 pixels, but this is just for demonstration). I want the dynamic set of the bottom container to fill the rest of the shell.

In this demo, I did this using JS:

$(function() {
  var top = $('#top');
  var bottom = $('#bottom');
  bottom.height(bottom.parent().height()-top.outerHeight());
});

Do you think there is a way to do this in pure HTML / CSS? Regardless, I can even use tables . I have been thinking about a solution for a long time and have not found a cross browser compatible with it. Thanks for any help.

UPDATE 1: I made one mistake defining these issues. top does not have a fixed height - it is determined by the content. http://jsbin.com/ixiju4/6

UPDATE 2: OK. This is what I really want: http://jsbin.com/ixiju4/8

Answer 1

There's a pretty simple CSS solution:

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #top {
    height: 100px;
    width: 100%;
    background-color: #00f4f7;

  }
   #bottom {
    background-color: #00f400;
    width: 100%;
    height: 100%
  }

2. CSS , :

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #top {
    background-color: #00f4f7;   
  }

  #bottom {
    background-color: #00f400;
    height: 100%;
    padding: 10px;
  }

  #inner {
    height: 100%;
    background-color: #f0f400;
    margin-bottom: 10px;
  }

Answer 2

, :

<table style="height:400px">
  <tr>
    <td style="height:100px">Fixed to arbitrary value</td>
  </tr>
  <tr>
    <td style="height:auto">Dynamically filling</td>
  </tr>
</table>

http://jsbin.com/ixiju4/3

: , : ! - . display: table display: table-row , IE, 8

2: , :

#wrapper { display: table; }

#top, #bottom { display: table-row; }

IE < 8, . http://jsbin.com/ixiju4/5

3: . , Tiny Giant Studios . . ( .)