您所在的位置:小祥子 » 编程 » CSS » 正文

Div高度百分比

时间:2015-07-02 编辑:魔芋铃 来源:CnBlogs

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

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

父元素可以设置高度为具体的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>
关键词:百分比