如何使 div 占据剩余高度？

小开

最佳答案

使用绝对定位:

#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>

小开

演示

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

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

小开

使用 CSS 表格，你可以在这两个表格之间包装一个 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>

但是，这取决于哪些浏览器支持这些显示类型。我不认为 IE8及以下版本可以。编辑: 更正一下—— IE8确实支持 CSS 表。

小开

你可以用这个 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;
}

只需将类 .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>

它适用于所需的子级数，不需要额外的标记。

小开

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

小开

因为你知道前面的内容占用了多少像素，你可以使用 calc()函数:

height: calc(100% - 50px);

小开

为什么不使用带负边距的填充呢:

<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%;
}

小开

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

所以，我写了一个 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>

小开

你可以用

display: flex;

属性，正如之前@Ayan 提到的，但是我已经创建了一个工作示例: https://jsfiddle.net/d2kjxd51/

小开

我自己也面临同样的挑战，并且使用 flex属性找到了这两个答案。

CSS

.container {
display: flex;
flex-direction: column;
}


.dynamic-element{
flex: 1;
}

小开

可以使用 calc函数计算第二个 div 的剩余高度。

*{
box-sizing: border-box;
}


#div1{
height: 50px;
background: skyblue;
}


#div2{
height: calc(100vh - 50px);
background: blue;
}

<div id="div1"></div>
<div id="div2"></div>