Question

有没有人知道如何将页脚粘贴到div的底部，如position: fixed元素。我发现的方法都将它贴在起始视图的底部或底部，所以你必须向下滚动才能看到它们。

我尝试将父级设置为position:relative，将子级设置为position: absolute，同时使用display: table-cell和vertical-align: bottom，但在滚动时都不会将其保留到位相反，它们将它保留在div的底部或默认视图的底部。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

此处的问题是，您无法在元素上使用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>

位于div底部的位置元素

2 个答案: