html - 将元素定位到高度的底部:100％div

我想“钉”一个按钮底部的侧边栏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>

这可能是因为以百分比表示的高度，因为它可以处理像素高度，但是必须有某种方法来处理百分比，因为侧边栏必须跨越整个页面高度。

最佳答案

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

关于html - 将元素定位到高度的底部:100％div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33464900/