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

【问题标题】：Position element to the bottom of a height: 100% div将元素定位到高度的底部：100% div
【发布时间】：2015-11-01 17:19:33
【问题描述】：

我想将一个按钮“固定”到高度为 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>

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

【问题讨论】：

标签： html css sidebar

【解决方案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>

【讨论】：

我将您的评论标记为正确，因为它确实是问题的解决方案。但是，我已经实施了该解决方案。问题是我使用的引导导航栏将整个页面向下“推”了 51px，因此将“底部：0”按钮推到了视野之外。使用“底部：51px”解决了它。

【解决方案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>

【讨论】：