如何使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%; }
