javascript - 绝对位置，底部为 0 仅适用于高度为 100% 的父级

Question

绝对位置(底部为 0)仅适用于高度为 100% 的父级。一旦父级的高度超过100%，将其设置为bottom:0将不再起作用。您将无法在代码片段本身中看到这一点 - 因为它只允许将主体高度设置为 100%。我该如何解决这个问题？

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

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

Answer 1

它可能不起作用，因为您绝对将其定位到视口(viewport)的底部。如果您想将其绝对定位到父元素(在本例中为 body 元素)的底部relative，请将 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>