网页内容高度不够时，让footer处于页面底部的方法

声明：兼容要求比较高，请另寻它法，如 js 控制

HTML结构

<html>
  <body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </body>
</html>

CSS样式

html{
    height: 100%;    /*保证页面高度撑满屏幕*/
}
body{
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.header{
    height: 100px;
    background: antiquewhite;
}
.content{
    flex: 1;
    background: cadetblue;
}
.footer{
    height: 100px;
    background: darkgrey;
}

效果图

效果图.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容