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

user_104452 0
Viewed 80014

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

position css dom html
2 Answers

Shorter solution:

.footer {
    bottom: 0%;
    position: fixed;
}
user_10376130
Related