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

最新推荐文章于 2020-08-27 16:48:02 发布

SunPrincess

最新推荐文章于 2020-08-27 16:48:02 发布

阅读量721

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/SunPrincess/article/details/52882382

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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; }

SunPrincess

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无论页面内容多长，footer始终在页面底部

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
复制链接

扫一扫