如何在纯HTML / CSS中创建动态水平布局没有JS？

Question

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

I have a wrapper which height is defined and two containers inside: top and bottom . The height of the top container isn't fixed (in the example it is set to 100px but this is just for demonstration). What I want is to dynamically set the bottom container to fill the rest of the wrapper.

In this demonstration I did it 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 it in pure HTML/CSS? No matter how, I can even use tables . I've been thinking about the solution for some time now and haven't found any cross browser compatible one. Thanks for any help.

UPDATE 1: I've made one mistake defining this questions top has no fixed height - it is defined by it's 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 easy pure CSS solution to this:

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

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

UPDATE 2 Following on from your last round of editing to the question, I've updated the CSS accordingly, which is:

#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

Well, if you can use tables:

<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

Disclaimer: Dear Googler, if you found this answer: Don't do this at home! Tables for styling are evil. Use display: table and display: table-row to achieve the same effect in everything but IE < 8

Edit 2: OK, for completeness:

#wrapper { display: table; }

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

Doesn't work in IE < 8, as mentioned. http://jsbin.com/ixiju4/5

Edit 3: I was really blind. Yes, Tiny Giant Studios answered with the obvious way to do it. You should go with his answer. (I'm leaving mine for completeness.)