html-正文无法拉伸到全高页面

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; 我所知道的是，可以通过设置HTML，body {height：100％}并将其定位在div绝对值和bottom：0px内来实现； fe: fe：

    <html>
    <body>
    .
    .
    .
    <div id="footer">
    </div>
    </body>
    </html>

and the css: 和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. 上面的代码没有HTML预期的结果，body元素的高度与包含元素的高度一样。 Could you please tell me why? 你能告诉我为什么吗？ link to website: http://www.lesemouvantes.com/dev/ 链接到网站： 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. 使用jQuery部分解决了该问题，在加载时我将文档的高度存储到var中，然后将此值应用为body元素的高度。

Answer 1

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. 如果找不到这样的元素，则包含的块为html。

So in your case, the footer is being placed at the bottom of html and not body you should set position:relative; 因此，在您的情况下，页脚位于html的底部，而不是正文，应设置position：relative; for your body because only then it will be placed at the bottom of body. 对于您的身体，因为只有这样它才会被放置在身体的底部。

html-正文无法拉伸到全高页面

问题描述

1 个解决方案

解决方案1
0 2012-05-06 13:51:13

html-正文无法拉伸到全高页面

问题描述

1 个解决方案

解决方案1 0 2012-05-06 13:51:13

解决方案1
0 2012-05-06 13:51:13