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

Question

我想要 "pin" 侧边栏底部的按钮 - div 高度为 100%，因为它应该填满页面的整个左侧。

我试过这样做：

.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 标签上定义高度才能在那里使用百分比高度。

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 2

要解决此问题，请将 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>

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

Position element to the bottom of a height: 100% div

html

css

sidebar