div高度自适应的问题
<divid="div1"></div><divid="div2"></div><divid="div3"></div>怎么设置能让div1高80PX，DIV3高40PX...
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
怎么设置能让div1高80PX，DIV3高40PX，DIV2充满其余的空间，不管DIV2里是否有内容都能自动充满其余的控件，浏览器不出现滚动条
1楼的你净说些废话，会jquery的话还来提什么问题 展开
<div id="div2"></div>
<div id="div3"></div>
怎么设置能让div1高80PX，DIV3高40PX，DIV2充满其余的空间，不管DIV2里是否有内容都能自动充满其余的控件，浏览器不出现滚动条
1楼的你净说些废话，会jquery的话还来提什么问题 展开
4个回答
展开全部
有点不太明白你想表达的意思，如果div1和div3是在同一行，那2个div应该会设定一个宽度并设定float:left;这样的话你所说的“其余”空间应该就是div3下方的一块空余；想自动填满的话那你所写的布局就要改一下，如下：
<div id="div2">
<div id="div1"></div>
<div id="div3"></div>
</div>
样式为：
#div2{ overflow:hidden; background-color:#FF0000; width:200px;}
#div1{ float:left; width:100px; height:80px; background-color:#999999;}
#div3{ float:left; width:100px; height:40px; background-color:#00FF66;}
这里div2只是单纯的填补多余的不对称空间而已
还有如果你所想表达的布局是div1是header，div3是footer；div2那就应该是content部分了，我猜你想要的效果应该是页眉固定，页脚固定，中间内容部分根据浏览器来判断自身的高度，如果真是这样的话，额。。。我也帮不了你了，这问题一般我不考虑的，我只负责页面的问题，至于这种自适应的高度一定是需要脚本自动获取的，一般这个都是公司程序员去解决的
<div id="div2">
<div id="div1"></div>
<div id="div3"></div>
</div>
样式为：
#div2{ overflow:hidden; background-color:#FF0000; width:200px;}
#div1{ float:left; width:100px; height:80px; background-color:#999999;}
#div3{ float:left; width:100px; height:40px; background-color:#00FF66;}
这里div2只是单纯的填补多余的不对称空间而已
还有如果你所想表达的布局是div1是header，div3是footer；div2那就应该是content部分了，我猜你想要的效果应该是页眉固定，页脚固定，中间内容部分根据浏览器来判断自身的高度，如果真是这样的话，额。。。我也帮不了你了，这问题一般我不考虑的，我只负责页面的问题，至于这种自适应的高度一定是需要脚本自动获取的，一般这个都是公司程序员去解决的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果你把div1和div3的高度设为百分比，例如：（div1 height:20%;）（div3 height:10%;）这样能过CSS就可以实现。
<!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>example</title>
<style type="text/css">
<!--
html,body{ height:100%; margin:0 auto;}
#div1{ background:#eee; height:20%;}
#div2{ background:#ddd; height:70%;}
#div3{ background:#ccc; height:10%;}
-->
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
但如果要用像素值，那么就要配合js 求出用户可用区域的高，减（div1+div2）的高度和，再赋值给div2，也是可以的。
<!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>example</title>
<style type="text/css">
<!--
html,body{ height:100%; margin:0 auto;}
#div1{ background:#eee; height:20%;}
#div2{ background:#ddd; height:70%;}
#div3{ background:#ccc; height:10%;}
-->
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
但如果要用像素值，那么就要配合js 求出用户可用区域的高，减（div1+div2）的高度和，再赋值给div2，也是可以的。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div2 height=auto; 如果不行 那就js咯 ：
function fH(h,o,b){o=document.getElementById('大框架id');if(h)h+='px';else{b=o.contentWindow.document.body;if(b){if(b.offsetHeight)h=b.offsetHeight;else if(b.scrollHeight)h=b.scrollHeight;else h=700;h+='px';}else h='auto';}o.style.height=h;}
window.onload=function(){
parent.fH(设置高度);
｝
function fH(h,o,b){o=document.getElementById('大框架id');if(h)h+='px';else{b=o.contentWindow.document.body;if(b){if(b.offsetHeight)h=b.offsetHeight;else if(b.scrollHeight)h=b.scrollHeight;else h=700;h+='px';}else h='auto';}o.style.height=h;}
window.onload=function(){
parent.fH(设置高度);
｝
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个只能有js实现了，建议你去下个jquery包，这样实现起来会方便些
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
