首页 新闻 搜索 专区 学院

怎么让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。。。

snowinmay的主页 snowinmay | 菜鸟二级 | 园豆:240
提问于:2013-07-09 17:08
< >
分享
最佳答案
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
TiestoRay | 小虾三级 |园豆:687 | 2013-07-09 21:58

嗯,就是说要先用js测出屏幕高度,然后计算出列的高度是把。。谢谢。

snowinmay | 园豆:240 (菜鸟二级) | 2013-07-10 09:17
其他回答(2)
-1
dudu | 园豆:37751 (高人七级) | 2013-07-09 17:20
0

可以用一下CSS 设置的 这样设置了css .container 样式的DIV元素就会铺满 浏览器屏幕的

 

html, body {
margin:0;
padding:0;
}
.container {
height:100%;
/*width: 100%;*/
border: 1px solid green;
position:fixed;
}

张 博 | 园豆:206 (菜鸟二级) | 2015-12-10 16:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册