Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #257


    I’d like to know if this is possible to have a 100% height layout using css.

    I’d like to have the footer fixed at the bottom of the page (screen) when there’s not enough content in a post/page.

    I tried :

    html, body {

    height: 100%;

    margin: 0;


    #global {



    where div#global is placed like this in header.php and footer.php


    <body id=’top’ <?php body_class($k_body_class);?>>

    <div id=”global”>



    </div> <!– GLOBAL DIV –>


    But it doesn’t really seem to work and I can’t figure how to do that…

    Is there a way to do this ?

    Best regards

    PS: thank you for this amazing theme !


    I’d suggest taking out the height / min-height values you added and use something like this:

    #footerwrap {
    position: fixed;
    bottom: 0;

    I would suggest having a smaller footer area than the demo though or most of the page will be the footer!


    Thanks James for your answer !

    Unfortunately, your proposition is not what i need.

    With this solution, the footer is always ‘fixed’ at the bottom of the scrren even if the content is important; in that case the rest of the content of the page appears under the footer.

    What i would like to do is to fix the footer at the bottom of the screen ONLY for pages which have not enough content to fill the screen.

    For others cases, pages which have enough content to fill the screen, the footer should appear after the content just as usual.

    I know there’s a way to do this, but which way… ? :)

    Got an idea ?


    Ok, I misunderstood what you needed.

    What you need is jQuery to work out what the height of the page is and add a class to fix the footer to the bottom of the page. I’m not good enough with jQuery to put this together for you, I tend to ask my jQuery questions over at http://stackoverflow.com so if you can’t do it yourself give them a try.


    Ok, thanks James !

    I’ll try with jQuery although i’m not very familiar with this library…

    Wish me luck :)



    Good luck :)

    Best regards,


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

The topic ‘100% Height Layout’ is closed to new replies.