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

WBOY
Freigeben: 2016-06-24 12:01:23
Original
2534 Leute haben es durchsucht

假设一个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>
<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>









Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage