html文字自动铺满页面,body height:100%让页面容器元素铺满窗口

div 容器height:100%

我们想要让页面中的一个div容器能够实现自适应浏览器窗口的高度，这时候我们一般不希望牵扯js，简单的通过css的height：100%来实现高度的自适应。

这样是不起作用啊，height属性的百分比值是相对于父元素的高度来继承高度的。而body的高度默认是auto的，所以body需要设置高度height:100%;

因为body不算页面的根元素，html才是页面的根元素。我们需要给html也设置height:100%;

html,body{

height:100%;

margin:0;

padding:0;

}

.htcont{

height:100%;

background:#0C58A7;

}

这样div就可以自适应浏览器窗口的高度，效果如下：

这个div的height：100%是自适应了浏览器的高度了，可以方便的用作单页应用的布局。

妹纸前端，前端技术提升的好去处

html,body{

height:100%;

margin:0;

padding:0;

}

.htcont{

height:100%;

background:#0C58A7;

white-space: nowrap;

color: #ffffff;

text-align: center;

}

.htcont:after{

content:"";

display: inline-block;

height:100%;

width:0;

vertical-align: middle;

}

效果如下：

这个height:100%是实实在在的height:100%,可以通过after上下居中的样式，让文本上下居中。