css3 让高度满屏

CSS3 是一种非常强大的样式语言，可以让我们实现许多美丽的效果。其中之一就是让网页的高度自动适应屏幕高度，同时做到没有多余空白区域。下面就给大家分享一下实现方法。

html,body{
     margin:0;
     padding:0;
     height:100%;
 }
.wrapper{
     min-height:100%;
     position:relative;
 }
 .footer{
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;
 }
    

首先，我们可以将页面中的 html 和 body 标签的 margin 和 padding 设置为 0，然后再将它们的高度设为 100%。这样可以让我们的网页在任何屏幕上都能用最大的面积展现。

接着，在最外层的盒子中，我们需要为其设置一个最小高度，并且将其定位设为相对定位。这样，我们就能让这个盒子的高度随着内部元素的增多而增高。

最后，我们只需要将底部的 footer 标签定位为绝对定位，将它的 bottom 属性设置为 0，宽度设为 100%。这样，我们的网页就能保证在任何设备上都完美显示，并且没有多余的空白区域了。

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