css高度100%(百分比高度)

 

css的height属性可以设置100%，但是必须能得到父元素的高度。否则无效。

例如：

    #aa {  background: red; height： 200px; }
    #bb { height: 80%; background: blue; }
    #cc { height: 50%; background: green; }

    <div id="aa">
        <div id="bb">
            <div id="cc"></div>
        </div>
    </div>

    此时百分比起效，效果如下：

如果无法得到父元素的高度，则百分比失效。

例如：

    #aa {  background: red; }
    #bb { height: 80%; background: blue; }
    #cc { height: 50%; background: green; }

    <div id="aa">
        <div id="bb">
            <div id="cc"></div>
        </div>
        <div style="height: 200px"></div>
    </div>

    效果如下：

如果body下的div想要实现高度100%效果，也需要设置父元素的高度，就是html和body了。

html, body { height: 100%; }

#aa { height: 100%; }

      这样就可以实现高度100%效果了，但是#aa不能设置padding，margin和border，否则会出滚动条。html和body最好设置padding: 0; margin: 0;不然会出现无法填充满的现象。

 

转载于:https://www.cnblogs.com/k13web/p/4139359.html