文章/答案/技术大牛

发布

问将元素放置在div的底部
EN

Stack Overflow用户

提问于 2015-11-10 09:00:10

回答 2查看 10.2K关注 0票数 2

有没有人知道像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>

html

css

css-position

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-10 09:11:04

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

票数 8

Stack Overflow用户

发布于 2015-11-10 09:07:56

这里的问题是，您不能在元素上使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33621120

复制

相似问题

问将元素放置在div的底部
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素放置在div的底部EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将元素放置在div的底部
EN