页脚动态

Question

我想动态地将我的页脚放在底页。

1. 页脚必须固定在底部
2. 如果页面中有更多数据，则页脚必须自动降低。

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 60px;
    margin-bottom: 75px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 90%;
    height: 45px;
    line-height: 45px;
}

<div id="container"> 
   <div id="main">
    
   </div> 
   
   <div id="footer">
        <div class="container">
            <span>Place sticky footer content here.</span>
        </div>
   </div> 
</div>

Answer 1

我可能会对你想要的东西感到有点困惑，你希望页面页脚自动与正文文本间隔开，无论它添加了多少？

试试Position: relative。

Absolute定位会将您的页脚从文档流中移出，因此如果您有很多垂直内容，页脚将被放置在它上面。

这对我有用（假设我知道你在追求什么）：

footer {
    position: relative;
    bottom: 0;
    width: 90%;
    height: 45px;
    line-height: 45px;
    padding-top: 15px;
}

你可以添加一个：

margin: 0

如果你想要更少的间距。