div 底部的位置元素

Question

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

我试过将父项设置为 position:relative，将子项设置为 position: absolute，并且还使用了 display: table-cell 和 vertical-align: bottom，但都没有将其固定在原位，因为你滚动，而不是他们在 div 的底部或默认视图的底部保持静态。

.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

这里的问题是您不能在元素上使用 position: fixed（仅适用于 viewport），但您希望 footer 元素位于 fixed 相对于它的父级的位置。

您可以通过包装可滚动的 div 并将 footer 设置到该 wrap 元素的底部来实现。由于 wrap 不会滚动（其中的元素会滚动），因此当您滚动时 footer 不会移动。

看到这个fiddle。

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
  height: 150px;
  overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

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

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text</div>
</div>

Answer 2

你真的不能，不是你想要的方式，你需要使用 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>

div 底部的位置元素

Position element at bottom of div

html

css

css-position