61,112
社区成员
发帖
与我相关
我的任务
分享div如何铺满剩余高度或宽度
假设一个div1，里面有div2和div3，div2已经布局好了高度固定，如何让div3铺满剩下的高度？请附上自写的代码，谢谢！
...全文
请发表友善的回复…
发表回复
qcxl 2014-07-19
- 打赏
- 举报
用jQuery获取高度相减，兼容性较好；
下面例子中border仅用于查看是否实现想要效果，实际应用时如果有border，相减时需要将border考虑进去
<!DOCTYPE HTML><html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
init();
});
function init(){
var h1 = $("#d1").height();
var h2 = $("#d2").height();
var style = "height:"+(h1-h2)+"px;background:grey;width:100%;"
$("#d3").attr("style",style);
}
</script>
<body>
<div>
<div id="d1" style="height:500px;width:400px;border:1px solid red;">
<div id="d2" style="height:100px;width:100%;border:1px solid black;"></div>
<div id="d3"></div>
</div>
</div>
</body>
</html>
inspire_YI 2014-07-18
- 打赏
- 举报
这个方法不行，没有抛出异常？
KK3K2005 2014-07-18
- 打赏
- 举报
有没有用css就能实现的？[/quote]
查阅 css盒布局
另外只是老浏览器不支持
inspire_YI 2014-07-18
- 打赏
- 举报
有没有用css就能实现的？
KK3K2005 2014-07-18
- 打赏
- 举报
function getdomheight(dom){ //获取一个dom的高度
return dom.offsetHeight;
}
var div1 = document.getElementById('div1的id');
var div2 = document.getElementById('div2的id');
var div3 = document.getElementById('div3的id');
div3.style.height = getdomheight(div1) - getdomheight(div2) +'px';
就是减法
inspire_YI 2014-07-18
- 打赏
- 举报
求人气。
