Search code examples
htmlcssdomposition

HTML/CSS Align DIV to bottom of page and screen - whichever comes first

I have a div:

clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;

And a html, body:

html, body {
    height:100%;
    width:100%;
}


/* Body styles */
body {
    background:url(../images/background.png) top center no-repeat #101010;
    color:#ffffff;
}

My code is basically 20 loren ipsum paragraphs followed by the div.

Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it

I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.

I tried fixed but that just fixed it.. no use to me

How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not

Solution

  • Ok, fixed and working :D Hope it does what you want it to. Preview here: http://jsfiddle.net/URbCZ/2/

    <html>
    <body style="padding:0;">
        <div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
            test content :D
        </div>
        <!--Content Here-->
    </div>
    </body>
</html>