CSS实现页脚始终在底部

当页面高度小于文档内部高度时，页脚也处于最底部的实现方式
  • CSS

    html,body{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    html{
        min-height: 100%; /* 这个要设置最小高度 */
        position: relative;
    }
    body{
        margin-bottom: 60px; /* footer的高度 */
    }
    .footer{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: #ff0000;
    }
  • html
<body>
    <div class="footer"></div>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1赞 92
  • 弹指芳华（十五）
    苍穹群雁过，寒江一舟行。 落叶飘千里，此时难为情。
    信陵脱剑阅读 159评论 2赞 3
  • 2017-10-08
    吴迪【云道惠商 @概念普及】 英国演化经济学家卡萝塔·佩蕾丝认为，“每一次技术革命都是新产品、新行业、新基础设施的...
    be58e0597e58阅读 664评论 0赞 0
  • 『8.13』如何阅读一本书day150
    我很喜欢书的后记里所写的一段话:在喧闹而寂静的旅途上不期而遇，结伴同行。不必将它变成自己的影子，也不必让它融入自己...
    晓蕊阅读 139评论 0赞 0