css 中设置高度自适应屏幕高度

CSS是网页设计中必不可少的一部分。在网页设计的过程中，当前很多设计都需要让页面的高度自适应屏幕高度。接下来我们就来讲一讲如何用CSS设置高度自适应屏幕高度的方法。

html,body {
        height:100%;
        margin:0;
        padding:0;
}
.container {
        min-height:100%;
        box-sizing:border-box;
        padding-bottom:80px;
}
.footer {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:80px;
}
    

上面的代码中，我们通过设置html,body的高度为100%、margin和padding为0，来使得页面可以填充整个屏幕。然后通过设置.container的最小高度为100%，并将其设置box-sizing为border-box来让它的padding不会撑起整个元素，最后通过设置footer的position为absolute，让它置于页面底部。

通过上面的设置，我们可以使得.container的高度始终为100%加上footer高度，从而实现了高度自适应屏幕高度的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！