怎样让一个div高度自适应浏览器高度

2024-12-04 06:07:15

推荐回答（3个）

回答（1）：

这个方法就大致分为两种吧，
第一种，用CSS的方法
第二种，用JS方法

这里暂时只演示第一种，如果第二种，另外@我

示例代码如下：
CSS代码第一种写法
html,body{height:100%; margin:0;}/**把HTML和BODY的高度设置成100%**/
div{height:100%; background-color:#ccc;}/**把你DIV的高度设置成100%**/

CSS代码第二种写法
div{height:100%; position:absolute; width:100%; background-color:#ccc; left:0; top:0;}
这里用到position:absolute; 所以HTML和BODY不需要设置100%

回答（2）：



 
 test
 
*{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;}
 



header

col1

col2

col3

回答（3）：

让一个div高度自适应浏览器高度的方法：
1、获取到window的innerHeight、clientHeight根据这两个参数定义div的高度。
function resizeElementHeight(element) {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop) + "px");
}

2、定义div的高度的方法：
document.getElementById("yourDiv").height = height；