Menu
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
928
Try position:fixed; bottom:0; . This will make your div to stay fixed at the bottom.
For that you would just add it at the bottom of the HTML code.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values. Note that for this to work, you also need to set a position style ( position:absolute , position:relative , or position:fixed ) on both/all of the elements you want to order.
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>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
