height为100%的问题

问题描述

很多同学，对于设置div 的高度为100%时，有疑惑。

设置div 的高度为100%，意思是此 div 的高度 铺满父元素。

那么 怎么使 div 铺满浏览器屏幕？

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style type="text/css">
        body,html{
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin:0;
            padding: 0;
        }
        #wrap{
            height: 100%;
            width: 100%;
        }
        .scrollBox {
            background-image: url(../模仿素材/about1Bg.jpg);
            background-size: cover;
            height: 100%;
            width: 100%;
        }
        
    </style>
</head>
<body>
<section id="wrap">
    <section class="scrollBox">
    </section>
</section>
</body>
</html>

设置section->section的height铺满浏览器，这时，设置scrollBox的height为 100%；再设置它的父元素wrap为100%；这时，我们打开浏览器查看效果。什么都没有显示。

查看元素。他们俩的height的值为0。

Why？

发现body和html的height值也为0。想到，wrap的父级元素是body，body的父级元素为html，要是我们设置它们为100%呢？

结果

成功了！！！！

posted on 2015-04-29 21:41  Feng枫  阅读(188)  评论(0)  编辑  收藏  举报

导航