CSS layouting for web page?

 

This question already has an answer here:

  • Make a div fill the height of the remaining screen space 31 answers

    • How about changing position to relative? I fiddled it a little: 

    .footer
{   
    height: 500px;
    width: 100%;
    background-color: green;
    position: relative;
    bottom: 0px;
}

    JsFiddle example. See it and tell me is this what you want.

    You can have a look at Ryan Fait's "sticky footer" here : http://ryanfait.com/sticky-footer/

    It does exactly what you are describing (ie footer always at least at the bottom of the page, even when the content div is not long enough).

    It does require you to make a small change in your markup though. You would end up with 

    <body>
    <div class="container">
        <div class="header"></div>
        <!-- this is where you put your content -->
        <div class="push"></div>
    </div>
    <div class="footer"></div>
</body>

    instead of what you already have. The "push" div is the empty div that fills up the space when the content isn't long enough to fill your page.

    EDIT : I created a fiddle with the solution I had in mind. As I said I changed your markup a little bit but hopefully it's not a problem for you.

    I also make the header and footer a bit smaller, just to make it easier to play with on jsfiddle.

    You are using height: 100%; you can't set height using % try using: min-height:450px; what this will do is set a minimum height and increase when content increases

    链接地址: http://www.djcxy.com/p/88244.html

    上一篇: 移动屏幕的DIV布局

    下一篇: 网页的CSS布局？