将元素定位到高度的底部：100% div

Question

我想将一个按钮“固定”到高度为 100% 的侧边栏 div 的底部，因为它应该填充页面的整个左侧。

我尝试这样做：

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0px;
  top: auto;
 }

<div class="sidebar">
  <button class="btn">Button</button>
</div>

这可能是因为百分比高度，因为它适用于像素高度，但必须有某种方法可以用百分比来完成此操作，因为侧边栏必须跨越整个页面高度。

Answer 1

要解决此问题，请将

html

和

body

的高度设置为 100%，如下所示。现在它们没有定义的高度设置（因此它们的高度为 0px），因此您的按钮技术上已经位于底部。

实例：

html, body {
  height: 100%;
}

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0;
 }

<div class="sidebar">
  <button class="btn">Button</button>
</div>

Answer 2

问题是您的容器没有任何实际高度。您还需要在 html 和 body 标记上定义高度才能在其中使用百分比高度。

html,
body {
  height: 100%;
  margin: 0;
}
.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
}
.btn {
  position: absolute;
  bottom: 0px;
  top: auto;
}

<div class="sidebar">
  <button class="btn">Button</button>
</div>

Answer 3

我在 Rapidweaver 上使用 Laaxis 主题，该主题投射 100% 高度的 bodyimage3 div，完全禁用 Discus 组件，您可以在 https://pizzomarinellafs.inarrivo.net/altriinterventi/ 进行检查 我如何将 Discus div 放在 bodyimage3 之后或之上。我几乎尝试了显示、隐藏、z-index 等所有方法，但均无济于事。有什么建议吗？ 谢谢，