CODEWITHSUNDEEP
htmlcss
nebkat
nebkat

Reputation: 8565

CSS 100% Height Div

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.

Upvotes: 6

Views: 16959

Answers (6)

Derik
Derik

Reputation: 11

this answer should be updated with this one: Make div 100% height of browser window

body,html{
    height:100%;
}

#container{
  height:100%
}

Upvotes: 1

Salman Arshad
Salman Arshad

Reputation: 272106

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>

Upvotes: 8

sundowatch
sundowatch

Reputation: 3103

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

That can solve your solution.

Upvotes: 0

Vinay Pandey
Vinay Pandey

Reputation: 8913

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

Upvotes: 1

luke
luke

Reputation: 14788

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.

Upvotes: 2

Venemo
Venemo

Reputation: 19067

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.:)

Upvotes: -1

Related Questions