转载自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>显示结果: