html - body doesn't stretch to full-height page
Question
I want to position an element at the bottom of the page. What I know is that this can be accomplished by setting HTML, body{height:100%} and then positioning inside div absolute and bottom:0px; fe:
<html>
<body>
.
.
.
<div id="footer">
</div>
</body>
</html>
and the css:
html, body{
height:100%;
}
#footer{
position:absolute;
bottom:0
}
the code above does not have the expected result as HTML, body elements have height just as much as the containing elements. Could you please tell me why? link to website: http://www.lesemouvantes.com/dev/
Partially solved the problem using jQuery, onload I store the height of document into a var and then apply this value as height of body element.
1 answers
solution1
0 2012-05-06 13:51:13
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html.
So in your case, the footer is being placed at the bottom of html and not body you should set position:relative; for your body because only then it will be placed at the bottom of body.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.