Question

我有一个带有overflow-y:auto;的div和一些元素，在底部我有一个页脚。页脚粘贴到底部：position: absolute;和bottom: 0px;它有效...直到我太多地降低父级的高度，然后页脚不再位于div的底部。如何解决这个问题？ JS小提琴：https://jsfiddle.net/smfg7357/2/

HTML：

<div class="outer">
  <div class = "inner">
    <div class= "item">item1</div>
    <div class= "item">item2</div>
    <div class= "item">item3</div>
    <div class= "item">item4</div>
    <div class= "item">item5</div>
    <div id="footer">footer</div>
  </div>
</div>

的CSS：

.outer{
  background-color: lightblue; 
  width: 150px;
  height: 200px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.inner{

}

.item{
  padding: 15px;
  color: white;
  background-color: blue;
}

.item:hover{
  background-color: darkblue;
}

#footer{
  position:absolute;
  bottom: 0px;
  width: 120px;
  background-color: red;
  padding: 15px;
  color: white;
}

#footer:hover{
  background-color: darkred;
}

Answer 1

您需要相对定位父元素.inner，以便子#footer元素相对于其高度而不是.outer元素的高度定位。

Updated Example

.inner {
  position: relative;
  min-height: 100%;
}

当绝对定位元素时，它将相对于最近定位的祖先元素定位（换句话说，最接近的祖先元素不是默认的position: static）。通过将position: relative添加到.inner元素，#footer元素将绝对位于其底部，而不是.outer元素的底部。此外，您还可以将.inner元素的min-height设置为100%，以使其始终具有等于.outer元素高度的最小高度。

还值得指出的是，绝对定位的元素将从正常流中移除，这意味着它将与您的最后一个元素重叠（在这种情况下，项目5将不可见）。如果这不是所需的结果，您可以简单地用填充替换元素。在这种情况下，由于元素的固定高度为48px，因此简单地向padding-bottom: 48px元素添加.inner：

Updated Example

.inner {
  position: relative;
  min-height: 100%;
  padding-bottom: 48px;
  box-sizing: border-box;
}

但是，您可以避免绝对定位并使用flexbox。只需将父元素的display设置为flex，然后将flex-direction更改为column，然后将margin-top: auto添加到.footer元素中将它放在父元素的底部。

.parent {
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.footer {
  margin-top: auto;
}

这里的基本示例：

.parent {
  background-color: lightblue;
  width: 150px;
  height: 400px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.item, .footer {
  padding: 15px;
  color: white;
  background-color: blue;
}

.footer {
  background-color: red;
  margin-top: auto;
}

<div class="parent">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="footer">footer</div>
</div>

如何使用overflow-y：auto with child with bottom：0和position：absolute？

1 个答案: