div如何铺满剩余高度或宽度_html/css_WEB-ITnose

假设一个div1，里面有div2和div3，div2已经布局好了高度固定，如何让div3铺满剩下的高度？请附上自写的代码，谢谢！

百度·度咔剪辑

度咔剪辑，百度旗下独立视频剪辑App

3

查看详情

回复讨论(解决方案)

求人气。

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';

就是减法 

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';

就是减法 

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';

就是减法 

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';

就是减法 

用jQuery获取高度相减，兼容性较好；
下面例子中border仅用于查看是否实现想要效果，实际应用时如果有border，相减时需要将border考虑进去

nbsp;HTML>
<script></script>
<script> <br /> $(document).ready(function(){ <br /> init(); <br /> }); <br /> function init(){ <br /> var h1 = $("#d1").height(); <br /> var h2 = $("#d2").height(); <br /> var style = "height:"+(h1-h2)+"px;background:grey;width:100%;" <br /> $("#d3").attr("style",style); <br /> } <br /> </script>