Home  >  Article  >  Web Front-end  >  div如何铺满剩余高度或宽度_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:01:232420browse

假设一个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考虑进去

nbsp;HTML>










Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn