欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-13 15:17:23
...
假设一个div1,里面有div2和div3,div2已经布局好了高度固定,如何让div3铺满剩下的高度?请附上自写的代码,谢谢!


回复讨论(解决方案)

求人气。



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

就是减法


有没有用css就能实现的?




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

就是减法


有没有用css就能实现的?

查阅 css盒布局
另外只是老浏览器不支持

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考虑进去












推荐阅读