html - 将元素定位在 div 底部

Question

有谁知道将页脚固定在 div 底部的方法，例如 position: fixed 元素。我发现的所有方法都将其粘贴在起始 View 的底部或底部，因此您必须一直向下滚动才能看到它们。

我试过将父级设置为position:relative，将子级设置为position: absolute，并且还使用了display: table-cell和 vertical-align: bottom，但它们都不会在您滚动时将其固定在原位，而是将其保持在 div 底部或默认 View 底部的静态位置。

.a{
  position:relative;
  background-color:#ccc;
  width:500px;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  float:left;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

<div class="a">
    Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    <div class="footer">Some text</div>
</div>

Answer 1

你真的不能，不是你想要的方式，你需要使用 jquery 来继续移动位置。

您可以做的是用一个容器包裹整个区域，这是最简单的解决方案。

.outer {
    position:relative;
    width:500px;
}

.a{
  background-color:#ccc;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

  <div class="outer">
    <div class="a">
       Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    </div>
    <div class="footer">Some text</div>
  </div>