body height:100%让页面容器元素铺满窗口
2017-02-12 23:04

div 容器height:100%

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

<div style='height:100%;'>
</div>

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

<body style='height:100%'>
<div style='height:100%'>
</div>
</body>

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

<body>
<div class="htcont">

</div>
</body>
<style>
    html,body{
        height:100%;
        margin:0;
        padding:0;
    }
    .htcont{
        height:100%;
        background:#0C58A7;
    }
</style>

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

height.png

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

<body>
<div class="htcont">
妹纸前端,前端技术提升的好去处
</div>
</body>
<style>
    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;
    }
</style>

效果如下:

height2.png

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


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4925)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1