|
|||||||
New to SitePoint Forums? Register here for free!
|
![]() |
|
|
Thread Tools | Display Modes |
|
|
#1 |
|
SitePoint Wizard
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Jan 2002
Location: Australia
Posts: 2,092
|
Automatic DIV height to fill 100% screen height
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 Any help would be much appreciated. |
|
|
|
|
|
#2 | |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
Hi,
Quote:
Code:
html,body {height:100%}
#outer {
height:100%;
min-height:100%;/*for mozilla*/
}
html>body #outer {height:auto}/*for mozilla */
Code:
<div id="outer"> All your content comes here................. </div> 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 |
|
SitePoint Wizard
![]() ![]() ![]() ![]() ![]() ![]() Join Date: Jan 2002
Location: Australia
Posts: 2,092
|
excellent thanks, I'll have a look at the thread.
|
|
|
|
|
|
#4 |
|
SitePoint Member
Join Date: Apr 2005
Posts: 5
|
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 |
|
SitePoint Addict
![]() ![]() ![]() Join Date: Sep 2003
Location: Europe
Posts: 222
|
|
|
|
|
|
|
#6 | |
|
CSS Advisor
![]() Join Date: Jan 2003
Location: Hampshire UK
Posts: 26,593
|
Quote:
![]() 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 ![]() |
|
|
|
|
|
|
#7 |
|
SitePoint Member
Join Date: Apr 2005
Posts: 5
|
That thread is super helpful. Thanks!
|
|
|
|
![]() |
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
| Display Modes | |
|
|
|
All times are GMT -7. The time now is 18:43.











Linear Mode
