无论页面内容多长，footer始终在页面底部

最新推荐文章于 2020-11-19 10:51:00 发布

原创最新推荐文章于 2020-11-19 10:51:00 发布 · 799 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现底部固定布局的方法。通过设置特定的CSS样式，确保了即使主要内容不足，页脚也会始终显示在页面底部，且不会影响整体布局。

html

<body>
    <div class="content">
        <div class="header"></div>
        <div class="main-content"></div>
        <div class="footer"></div>
    </div>
</body>

css

html, body { height: 100%; /*必要条件*/ } .content { min-height: 100%; /*必要条件*/ position: relative; /*必要条件*/ } .header { height: 100px; background-color: #000; } .main-content { padding-bottom: 200px; /*此处务必要大于等于footer的高度*/ background-color: #333; } .footer { position: absolute; /*必要条件*/ bottom: 0; /*必要条件*/ width: 100%; height: 200px; background-color: #232323; }