Fork me on GitHub
魔芋铃
Menu

Div高度百分比

有时候设置高度百分比，没有效果。

原因是父元素没有设置高度。

 

父元素可以设置高度为具体的px。或是100%等百分比。

这样子元素再能根据百分比来设置高度。

  <style type="text/css">
        html,body {
            width:100%;
            height:100%;
            margin:0px;
            padding:0px;
        }
        .center {
            width:80%;
            margin:auto;
        }
        #top {
            height:20%;
            background-color:yellow;
        }
        #module {
            height:60%;
            background-color:gray;
        }
        #bottom {
            height:20%;
            background-color:blue;
        }
    </style>
<body>
    <div id="top" class="center"></div>
    <div id="module"  class="center"></div>
    <div id="bottom"  class="center"></div>
</body>

 

posted @ 2015-07-02 15:17  魔芋铃  阅读(628)  评论(0)  编辑  收藏  举报