Question

我想将一个按钮“固定”到高度为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标签上定义高度，以便在那里使用百分比高度。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要解决此问题，请按照以下步骤将html和body的高度设为100％。现在他们没有定义高度设置（所以他们是0px高），所以你的按钮技术上已经在底部。

直播示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: