上下两个div,上面高度不固定,怎么让下面的div占用剩余的高度
日期：2014-05-16 浏览次数：20818 次
上下两个div,上面高度不固定,如何让下面的div占用剩余的高度?
如下图,div1的高度不固定(图片width100%),如何让下面的div占用剩余的高度呢?
------解决方案--------------------
借助JS来实现
如下图,div1的高度不固定(图片width100%),如何让下面的div占用剩余的高度呢?
------解决方案--------------------
借助JS来实现
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width:500px;height:800px;border:solid 1px #ccc;margin:100px auto;}
img{border:none; vertical-align:top;}
.box1{}
.box2{background:green;}
</style>
<script>
window.onload=function()
{
var oBox=document.getElementById('box');
var oImg=oBox.getElementsByTagName('img')[0];
var oBox2=oBox.getElementsByTagName('div')[1];
var img=new Image();
img.src=oImg.src+"?t="+Math.random()*1000;
img.onload=function()
{
oBox2.style.height=getStyle(oBox,'height')-this.height+'px';
}
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
return parseFloat(obj.currentStyle[attr])
------解决方案--------------------
0;
return parseFloat(getComputedStyle(obj,0)[attr])
------解决方案--------------------
0;
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="box1">
<img src="http://img0.bdstatic.com/img/image/shouye/quanzhixian.jpg" alt=""/>
</div>
<div class="box2"></div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
