Take a look at this example:

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 patible 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.

UPDATE 2: OK. This is what I really want:

Take a look at this example: http://jsbin./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 patible 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./ixiju4/6

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

• javascript
• html
• css
• layout

Share Improve this question Follow edited Dec 17, 2010 at 15:20 Maciej asked Dec 17, 2010 at 12:38 MaciejMaciej 37533 silver badges1111 bronze badges 1

• Following your update I'm still confident that the underneath solution will work. If you want, you could set a min-height CSS property to at least keep a space in the event that something goes wrong with your dynamic content generation :) – Tiny Giant Studios Commented Dec 17, 2010 at 15:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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;
  }

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./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 pleteness:

#wrapper { display: table; }

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

Doesn't work in IE < 8, as mentioned. http://jsbin./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 pleteness.)