Div高度百分比

  • A+
所属分类:CSS
摘要

有时候设置高度百分比,没有效果。原因是父元素没有设置高度。父元素可以设置高度为具体的px。或是100%等百分比。

[摘要]本文是对Div高度百分比的讲解,对学习CSS编程技术有所帮助,与大家分享。

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

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

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

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

  <style type="text/">
        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" ></div>
    <div id="module"  class="center"></div>
    <div id="bottom"  class="center"></div>
</body>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: