<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>高度100%div</title>
<style type="text/css">
body{height:100%;margin:0;padding:0;}
div{width:100px;height:100%;background:#ccc;position:absolute;top:0;left:50%;}
</style>
</head>
<body>
<div>
<span>高度100%</span>
</div>
</body>
</html>
ie6.0、firefox2.0、opera9.0下測試通過。關鍵點爲上面紅色部分。
只把div的高度設成100%我們發現div高度並沒有100%顯示，這時需要把body的高度也設爲100%，此時我們發現ie下已經實現，可在firefox、opera下卻無效，解決辦法是在div里加上position：absolute。這樣，div高度100%在3種瀏覽器下就都實現了。