位置:绝对；底部:0；转到页面底部 [英] position: absolute; bottom: 0; go to bottom of page
问题描述
如何让绝对定位的元素进入页面底部?
How do I make an absolutely positioned element go to the bottom of the page?
我想在我的页面上创建一个封面".为了让它覆盖整个页面，我使用了position:absolute"，四个方向都设置为0.但是，当页面内容的高度大于客户端窗口的高度时，覆盖高度为客户端高度，而不是整个页面的高度.
I want to create a "cover" over my page. In order to make it cover the whole page, I used "position: absolute" with each of the four directions set to 0. However, when the height of the page content is greater than the height of the client window, the cover height is the client height, not the height of the full page.
<style>
#a {
width: 100px;
height: 2000px;
background: red;
}
#b {
position: absolute;
bottom: 0;
width: 200px;
height: 200px;
background: blue;
}
</style>
<div id=a></div>
<div id=b></div>
我首先尝试将此问题诊断为 高度问题.大多数问题都与此步骤类似，因为 没有延伸到页面底部.但是，您会注意到，在此示例中，正文实际上确实将 2000 像素扩展到页面底部.
I first tried to diagnose this issues as an issue of <body></body> height. Most issues like this step from the fact that the <body></body> does not extend to the bottom of the page. However, you'll notice that in this example the body actually does extend 2000px to the bottom of the page.
请注意，position: fixed 不起作用，因为用户应该仍然可以滚动并且封面内的内容应该随页面滚动.
Note that position: fixed does not work because the user should still be able to scroll and the content within the cover should scroll with the page.
推荐答案
我想通了！
您只需要元素的包含块"作为主体，因此您只需将 </body> 设置为 position:relative
You just needed the "containing block" of the element to be the body, so you just need to set <body></body> to be position: relative
这篇关于位置:绝对；底部:0；转到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
