怎么让div的高度自适应屏幕的高度
0
[已解决问题]
解决于 2013-07-10 09:17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test</title>
<style type="text/css">
.header {
width: 100%;
background: #567;
height: 100px;
}
.col1, .col2, .col3 {
float: left;
width: 80px;
background: #DDD;
height: 100%;
margin-right: 10px;
word-wrap:break-word;
overflow:hidden;
padding-bottom:100%;
margin-bottom:-98%;
font-size:12px;
}
.foot{height:100px; background-color:#ccc;}
.middle{overflow:hidden; zoom:1;}
</style>
</head>
<body>
<div class="header">header</div>
<div class="middle">
<div class="col1">1</div>
<div class="col2">col2</div>
<div class="col3">3</div>
</div>
</body>
</html>
就像上面的代码，怎么让col1，col2的高度垂直铺满？
css有方法实现吗？还是要通过js。。。
最佳答案
1
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test</title> <style type="text/css"> *{margin:0px;padding:0px;} .header { width: 100%; background: #567; height: 100px; } #col1, #col2, #col3 { float: left; width: 80px; background: #DDD; margin-right: 10px; word-wrap:break-word; font-size:12px; } #foot{height:100px; background-color:#ccc;clear:both;} #middle{ zoom:1;} </style> </head> <body> <div class="header" id="XX">header</div> <div id="middle"> <div id="col1">col1</div> <div id="col2">col2</div> <div id="col3">col3</div> </div> <div id="foot"></div> <script> total = document.documentElement.clientHeight; colHeight = total-100-document.getElementById("col1").offsetTop; document.getElementById("col1").style.height=colHeight+"px"; document.getElementById("col2").style.height=colHeight+"px"; document.getElementById("col3").style.height=colHeight+"px"; </script> </body> </html>
在家里 没有什么Editor，凑合着看吧 稍微改动了点代码 为了方便 把class都换成id了
奖励园豆：5
嗯，就是说要先用js测出屏幕高度，然后计算出列的高度是把。。谢谢。
其他回答(2)
0
可以用一下CSS 设置的 这样设置了css .container 样式的DIV元素就会铺满 浏览器屏幕的
html, body {
margin:0;
padding:0;
}
.container {
height:100%;
/*width: 100%;*/
border: 1px solid green;
position:fixed;
}