怎样让一个div高度自适应浏览器高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样让一个div高度自适应浏览器高度相关的知识，希望对你有一定的参考价值。
这个方法就大致分为两种吧，第一种，用CSS的方法
第二种，用JS方法
这里暂时只演示第一种，如果第二种，另外@我
示例代码如下：
CSS代码第一种写法
html,bodyheight:100%; margin:0;/**把HTML和BODY的高度设置成100%**/
divheight:100%; background-color:#ccc;/**把你DIV的高度设置成100%**/
CSS代码第二种写法
divheight:100%; position:absolute; width:100%; background-color:#ccc; left:0; top:0;
这里用到position:absolute; 所以HTML和BODY不需要设置100% 参考技术A <!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;
#footheight: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> 参考技术B 让一个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；
div+css 父容器是自动高度，几个子容器也是自动高度，怎样兼容浏览器，父容器自适应高度？
参考技术A 高度自适应的，兼容什么浏览器？以上是关于怎样让一个div高度自适应浏览器高度的主要内容，如果未能解决你的问题，请参考以下文章
div+css 父容器是自动高度，几个子容器也是自动高度，怎样兼容浏览器，父容器自适应高度？