CSS 100% Height Div

Question

Im making a website http://nebkat.com/beta/index.php and there is a grey background and a white background for content(see for yourself). The problem is that I cant set the white part to be 100% height. It only stays up to the title(Welcome...) and then it stops.

Answer 1

The height: 100% in CSS doesnt't work as you'd expect.

My solution would be to write some simple JavaScript which measures the available height, and then sets the div's height appropriately.
It should be pretty straightforward, but if you need any help, I'll put it together for you.:)

Answer 2

set the height of your #container div to be 100% this should fix the problem (at least it will in firefox 3.6).

You should really install a tool like Firebug for firefox, you can use it to 'live' modify css properties on websites. it makes it really easy to figure out issues like this.

Answer 3

give height as 100% for container div and that would solve your problem.

Answer 4

Well you will use min-height:100%; or min-height:500px.

That can solve your solution.

Answer 5

Heights specified in % will not be honored by the browser (edit: I mean to say they wont work the way you expect them to).

You need a clearing div inside your <div id="container"> div. Here is where you should place it:

<div id="container">
    <div id="logo">...</div>
    <div id="menu">...</div>
    <div id="content">...</div>
    <!-- HERE -->
    <div style="clear: both;"></div>
</div>