底部为0的绝对位置仅适用于高度为100%的父对象

Question

底部为0的绝对位置仅适用于高度为100%的父级。一旦父对象的高度超过100%，将其设置为底部：0将不再有效。您将无法在代码片段中看到这一点，因为它只允许将身体高度设置为100%。我该怎么解决这个问题？

body {
  height: 200%;
}
#bottom {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  bottom: 0;
}

<div id='bottom'>
  bottom
</div>

Answer 1

它可能不起作用，因为您完全将它定位在视口的底部。如果您想将其绝对定位到相对于父元素的底部，在本例中为body元素，请将position: relative添加到元素：

html, body {
  height: 200%;
}
body {
  position: relative;
}
#bottom {
  border: 1px solid black;
  position: absolute;
  width: 100%;
  bottom: 0;
}

<div id="bottom">bottom</div>

Answer 2

如果您希望id为bottom的div始终位于底部，您可以使用这个

#bottom{
  position: fixed;
  bottom:0;
}

它会像一个黏糊糊的页脚。。。

希望它能帮助T04435

Answer 3

position: absolute;语句将相对于其第一个非静态祖先元素定位对象。来源：http://www.w3schools.com/cssref/pr_class_position.asp

绝对元素相对于其第一个定位元素进行定位（非静态）祖先元素

因此，您需要将position:relative;或position: absolute;添加到body标记中，如下所示：

body {
  position: relative;
  height: 200%;
}