Div高度的百分比问题

quasiceo 2014-09-02

展开全文

Div高度的百分比问题

2013-10-10 13:28:43| 分类： CSS |举报 |字号订阅

总结：Div设置高度为百分比的时候则外层的元素必须指定height属性

1.简单外层div

<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
            margin:0px;
            padding:0px;
        }
        #one {
            width:50%;
            height:50%;
            background-color:silver;
            margin:auto;
        }
    </style>
</head>
<body>
    <div id="one"></div>
</body>
</html>

显示结果：

2.简单外层div

  <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>

显示结果：

3.简单内层div

    <style type="text/css">
        #outOne {
            width:500px;
            height:500px;
            margin:auto;
            background-color:gray;
        }
        #innerOne {
            width:50%;
            height:50%;
            margin:auto;
            background-color:blue;
        }
    </style>

显示结果：

4.简单内层div2

     <style type="text/css">
         html,body {
             width:100%;
             height:100%;
             padding:0px;
             margin:0px;
         }
        #outOne {
            width:50%;
            height:50%;
            margin:auto;
            background-color:gray;
        }
        #innerOne {
            width:50%;
            height:50%;
            margin:auto;
            background-color:blue;
        }
    </style>
<body>
       <div id="outOne">
        <div id="innerOne"></div>
    </div>
</body>

显示结果：

5.简单内层div3：

     <style type="text/css">
         html,body {
             width:100%;
             height:100%;
             padding:0px;
             margin:0px;
         }
        #outOne {
            width:50%;
            height:50%;
            margin:auto;
            background-color:gray;
        }
        #innerOne {
            width:50%;
            height:50%;
            margin:auto;
            background-color:blue;
        }
         #innerTwo {
             width:60%;
             height:30%;
             margin:auto;
             background-color:red;
         }
    </style>
<body>
       <div id="outOne">
        <div id="innerOne"></div>
           <div id="innerTwo"></div>
    </div>
</body>