欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:961
  2. 浏览总数:11,480,993
  3. 评论:3873
  4. 分类目录:103 个
  5. 注册用户数:5841
  6. 最后更新:2018年10月17日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

如何让网页的footer一直固定在底端

  我们在开发网站的时候一般都会分header、main、side、footer。这些模块分别包含了各自公用的信息,比如header一般都是本网站所有页面需要引入的模块,里面一般都是放置菜单等信息;而footer一般是放在网站所有页面的底部。当网页的内容比较多的时候,我们可以看到footer一般都是在页面的底部。但是,当页面的内容不足以填满一页的时候,你就会发现footer不是在浏览器窗口的底部。本文提供CSS方式使得网站可以始终固定在网页的底部。

  我们的footer页面代码如下:

<footer class="footer">
  <div class="container">
    <p class="text-muted"><a href="https://www.iteblog.com" target="_blank">https://www.iteblog.com/</a> 版权所有,翻版不究</p>
  </div>
</footer>

关键看下面的css代码:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

  然后我们就可以使得footer模块一直在网站底端显示。很不错把,赶紧试试。

本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【如何让网页的footer一直固定在底端】(https://www.iteblog.com/archives/1519.html)
喜欢 (7)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!