如何始终将我的页脚设置在底部是否可以仅使用css

时间:2018-05-14 08:12:55

标签: html css

我有一个div类.footer这是我网站的页脚到目前为止我的网页上没有任何内容所以它在导航后位于我的页面顶部。 请告诉一些CSS,这样我就可以在页面底部设置页脚了。

3 个答案:

答案 0 :(得分:1)

在页脚上使用position:fixed并设置bottom:0会将页脚放在屏幕底部

有关CSS位置的更多信息here



footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: red;
}

<footer>
  some content
</footer>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这是我用来执行此操作的代码:

#footer{
  position: absolute;
  height: 75px;
  bottom: 0;
}

答案 2 :(得分:0)

使用

position: fixed;
bottom: 0;
滚动时,

position: fixed;会固定位置。 bottom:0会将元素保留在窗口底部。

&#13;
&#13;
    .footer{
        position: fixed;
        bottom: 0;
        width:100%;
        height:40px;
        background-color:red;
    }
    
    .header{
        width:100%;
        height:40px;
        background-color:green;
    }
&#13;
<div class="header">
       Header
</div>

<div class="footer">
    Footer
</div>
&#13;
&#13;
&#13;