Grow your CSS skills. Land your dream job.

100% height again

  • # February 3, 2009 at 6:32 am

    Hi all,

    I didn’t use to have any problems with this but now I do, can’t make it work in anything but IE7 – the irony!

    Code:
    html, body { height: 100%;}
    .container {height:auto !important; height:100%; min-height:100%; }
    .container .box { height: 100%;}

    The .container works just fine it seems but I can’t get the .box to get it as well. What am I missing?

    Thanks a lot,
    Oskar

    # February 3, 2009 at 9:04 am

    Hm, just found this:

    Quote:
    div { min-height: 100% }

    and two nested divs <body> <div><div> </div></div> </body>

    The result is that inner div is not 100% of body.

    The reason is because ‘height’ is not explicitly defined for the outer div, so the percentage in the inner is calculated to ‘auto’.

    Which actually makes sense. Guess I need to rethink my html-layout.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".