Div高度的百分比问题

最新推荐文章于 2024-04-19 22:14:49 发布

tterminator

最新推荐文章于 2024-04-19 22:14:49 发布

阅读量1.4k

点赞数

分类专栏： J2EE 文章标签： div

J2EE 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

转载自http://blog.163.com/m13864039250_1/blog/static/213865248201391012657561/

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

1.简单外层div

<html xmlns="http://www.w3.org/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>

显示结果：

tterminator

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Div高度的百分比问题

转载自http://blog.163.com/m13864039250_1/blog/static/213865248201391012657561/总结：Div设置高度为百分比的时候则外层的元素必须指定height属性1.简单外层div xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" c
复制链接

扫一扫