上下两个div,上面高度不固定,怎么让下面的div占用剩余的高度-HTML教程-爱易网页

上下两个div,上面高度不固定,怎么让下面的div占用剩余的高度

日期：2014-05-16　浏览次数：20911 次

上下两个div,上面高度不固定,如何让下面的div占用剩余的高度?
如下图,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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

上下两个div,上面高度不固定,怎么让下面的div占用剩余的高度

相关资料更多>

推荐阅读更多>