怎样让一个div高度自适应浏览器高度
展开全部
这个方法就大致分为两种吧，
第一种，用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%
第一种，用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%
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-07-08 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-06-17 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
让一个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；
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；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
