SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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
    Code:
    html,body {height:100%}
    #outer {
    height:100%;
    min-height:100%;/*for mozilla*/
    }
    html>body #outer {height:auto}/*for mozilla */
    html
    Code:
    <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. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    excellent thanks, I'll have a look at the thread.

  4. #4
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,471
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

    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. #7
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That thread is super helpful. Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •