Automatic DIV height to fill 100% screen height

HTML & CSS
1

Hi all, I am trying my first ‘real’ CSS layout and as expected am missing some of the simplier things of tabular layout.

In this instance I want my main content div (which spans the width of the page) to be liquid height so that the whole page takes up 100% of the browser height. The other elements (navigation bar etc) are all fixed pixel heights.

With tables this was simple, you set the table height to 100%, specified fixed pixels heights of all table rows, except one, and it would automatically fill the height of the browser.
No such luck in CSS using DIVs. Without this functionality my pages jump from taking up the full browser height, to only half depending on how much content is on the page.

I can’t set a fixed pixel height or a percentage height for my main DIV because it would not work with varying resolutions, and the other DIVs need to be pixel specific because they have bitmap elements.

CSS is great, but I wish it was finished :wink:

Any help would be much appreciated.

2

Hi,

In this instance I want my main content div (which spans the width of the page) to be liquid height so that the whole page takes up 100% of the browser height


html,body {height:100%}
#outer {
height:100%;
min-height:100%;/*for mozilla*/
}
html>body #outer {height:auto}/*for mozilla */

html


<div id="outer">
All your content comes here.................
</div>

This is about the only way to achieve 100% height that I know of. It will only work for the first element as shown above (and works in about 95% of browsers).

Have a look at my 3 column thread which is stickied at the top of the threads for a long explanation of this technique as used in the demo.

Paul

3

excellent thanks, I’ll have a look at the thread.

4

This only worked for me in IE. Firefox, Netscape and Opera still display as before (i.e. the content only fill the needed area).

Any thoughts?

5

:faq2: http://www.sitepoint.com/forums/showthread.php?t=143801

6

This only worked for me in IE. Firefox, Netscape and Opera still display as before (i.e. the content only fill the needed area).

Any thoughts?

First thought are you didn’t read my post correctly lol :slight_smile:

Second thoughts are how did you find a year old thread to look at!

Third thoughts are as yngwin mentione above. Have a look at the FAQ and also the 3 col demo that uses the techniques mentioned. There is a long explanation of 100% height in the faq so take a look at that also.

Fourth thoughts are that you are nesting more than one element and trying to apply 100% height to them all which won’t work for the reasons mentioned in the faq:)

If you want some specific help with your code then you’ll have to post some code to look at so we can see what you are doing exactly :slight_smile:

7

That thread is super helpful. Thanks!