如何使div占据高度?

我有这个问题,我有两个div:

<div style="width:100%; height:50px;" id="div1"></div> <div style="width:100%;" id="div2"></div> 

如何让div2占用页面的剩余高度?

使用绝对定位:

 #div1{ width: 100%; height: 50px; background-color:red;/*Development Only*/ } #div2{ width: 100%; position: absolute; top: 50px; bottom: 0; background-color:blue;/*Development Only*/ } 
 <div id="div1"></div> <div id="div2"></div> 

你可以使用这个http://jsfiddle.net/Victornpb/S8g4E/783/

 #container { display: table; width: 400px; height: 400px; } #container > div{ display: table-row; height: 0; } #container > div.fill{ height: auto; } 

只要将这个class级的.fill任何一个孩子中,然后占据剩下的高度。

 <div id="container"> <div> Lorem ipsum </div> <div> Lorem ipsum </div> <div class="fill"> <!-- this will fill the remaining height--> Lorem ipsum </div> </div> 

它适用于你想要多less孩子,不需要额外的标记。

演示

一种方法是设置div的position:absolute并给它一个50px的顶部和0px的底部;

 #div2 { position:absolute; bottom:0px; top:50px } 

由于您知道以前的内容占用了多less像素,因此可以使用calc()函数:

 height: calc(100% - 50px); 

使用CSS表格,你可以在你有两个div的地方包装div,并使用这个css / html结构:

 <style type="text/css"> .container { display:table; width:100%; height:100%; } #div1 { display:table-row; height:50px; background-color:red; } #div2 { display:table-row; background-color:blue; } </style> <div class="container"> <div id="div1"></div> <div id="div2"></div> </div> 

然而,取决于哪些浏览器支持这些显示types。 我不认为IE8和以下。 编辑:从头开始 – IE8不支持CSS表格。

您可以使用

 display: flex; 

CSS属性,如前面提到的@Ayan,但我创build了一个工作的例子: https ://jsfiddle.net/d2kjxd51/

我试着用CSS,或者你需要使用display:table,或者你需要使用大多数浏览器(2016)还不支持的新CSS。

所以,我写了一个jquery插件来为我们做,我很乐意分享它:

 //Credit Efy Teicher $(document).ready(function () { $(".fillHight").fillHeight(); $(".fillWidth").fillWidth(); }); window.onresize = function (event) { $(".fillHight").fillHeight(); $(".fillWidth").fillWidth(); } $.fn.fillHeight = function () { var siblingsHeight = 0; this.siblings("div").each(function () { siblingsHeight = siblingsHeight + $(this).height(); }); var height = this.parent().height() - siblingsHeight; this.height(height); }; $.fn.fillWidth = function (){ var siblingsWidth = 0; this.siblings("div").each(function () { siblingsWidth += $(this).width(); }); var width =this.parent().width() - siblingsWidth; this.width(width); } 
  * { box-sizing: border-box; } html { } html, body, .fillParent { height: 100%; margin: 0; padding: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div class="fillParent" style="background-color:antiquewhite"> <div> no1 </div> <div class="fillHight"> no2 fill </div> <div class="deb"> no3 </div> </div> 
 <div> <div id="header">header</div> <div id="content">content</div> <div id="footer">footer</div> </div> #header { height: 200px; } #content { height: 100%; margin-bottom: -200px; padding-bottom: 200px; margin-top: -200px; padding-top: 200px; } #footer { height: 200px; } 

为什么不使用带有负边距的填充? 像这样的东西:

 <div class="parent"> <div class="child1"> </div> <div class="child2"> </div> </div> 

接着

 .parent { padding-top: 1em; } .child1 { margin-top: -1em; height: 1em; } .child2 { margin-top: 0; height: 100%; }