使 div (height)占用父级剩余高度

考虑下面的 HTML/css 代码示例:

<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

其中我有一个带有两个子级的容器 div(也在这里: http://jsfiddle.net/S8g4E/)。第一个孩子有一个给定的身高。如何使第二个子元素占据容器 div的“自由空间”而不给出特定的高度？

在这个例子中，粉红色的 div也应该占据空白。

类似于这个问题: 如何使 div 占据剩余高度？

但我不想给 绝对位置绝对位置。

189345 次浏览
小开

除非我误会了，你可以把 height: 100%;和 overflow:hidden;加到 #down上。

#down {
background:pink;
height:100%;
overflow:hidden;
}​

现场演示

编辑: 因为您不想使用 overflow:hidden;，所以您可以在这个场景中使用 display: table;; 但是，在 IE8之前它是不支持的。(display: table;支持)

#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}


#up {
background: green;
display:table-row;
height:0;
}


#down {
background:pink;
display:table-row;
}​

现场演示

注意: 您说过您希望 #down高度为 #container高度减去 #up高度。display:table;解决方案正是这样做的，而 这把小提琴将非常清楚地描述这一点。

小开
最佳答案

根据您希望实现的浏览器支持以及 #up是否具有已定义的高度，可以通过多种方式来扩展 #down子节点以填充 #container的剩余空间。

样本

.container {
width: 100px;
height: 300px;
border: 1px solid red;
float: left;
}
.up {
background: green;
}
.down {
background: pink;
}
.grid.container {
display: grid;
grid-template-rows: 100px;
}
.flexbox.container {
display: flex;
flex-direction: column;
}
.flexbox.container .down {
flex-grow: 1;
}
.calc .up {
height: 100px;
}
.calc .down {
height: calc(100% - 100px);
}
.overflow.container {
overflow: hidden;
}
.overflow .down {
height: 100%;
}
<div class="grid container">
<div class="up">grid
<br />grid
<br />grid
<br />
</div>
<div class="down">grid
<br />grid
<br />grid
<br />
</div>
</div>
<div class="flexbox container">
<div class="up">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
<div class="down">flexbox
<br />flexbox
<br />flexbox
<br />
</div>
</div>
<div class="calc container">
<div class="up">calc
<br />calc
<br />calc
<br />
</div>
<div class="down">calc
<br />calc
<br />calc
<br />
</div>
</div>
<div class="overflow container">
<div class="up">overflow
<br />overflow
<br />overflow
<br />
</div>
<div class="down">overflow
<br />overflow
<br />overflow
<br />
</div>
</div>

网格

CSS 的 grid布局提供了另一种选择，尽管它可能不像 Flexbox 模型那样简单。但是，它只需要对容器元素进行样式化:

.container { display: grid; grid-template-rows: 100px }

grid-template-rows将第一行定义为固定的100px 高度，剩余的行将自动拉伸以填充剩余的空间。

我很确定 IE11需要 -ms-前缀，所以一定要验证您希望支持的浏览器的功能。

Flexbox

CSS3的 柔性箱体布局模块(flexbox)现在得到了很好的支持，并且非常容易实现。因为它是灵活的，它甚至可以工作时，#up没有一个定义的高度。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

值得注意的是，IE10和 IE11对一些 Flexbox 属性的支持可能存在问题，而 IE9或更低版本根本不支持。

计算高度

另一个简单的解决方案是使用 CSS3calc功能单元 阿尔瓦罗在他的回答中指出，但它要求第一个子元素的高度是一个已知值:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它得到了广泛的支持，唯一值得注意的例外是 < = IE8或 Safari 5(不支持)和 IE9(部分支持)。其他一些问题包括与 变形或 盒影一起使用 微积分，因此如果您关心这个问题，请务必在多个浏览器中进行测试。

其他选择

如果需要较旧的支持，可以将 height:100%;添加到 #down，使粉红色 div 达到全高，但有一点需要注意。它将导致容器溢出，因为 #up正在向下推它。

因此，您可以将 overflow: hidden;添加到容器中来修复这个问题。

或者，如果 #up的高度是固定的，您可以将它绝对放置在容器中，并向 #down添加一个填充顶部。

还有一种选择是使用表格显示:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​
小开

我不确定它是否可以完全用 CSS 来完成，除非你喜欢用幻觉来伪装它。也许可以用 Josh Mein 的答案，把 #container设成 overflow:hidden。

不管怎样，这里有一个 jQuery 解决方案:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);
小开

检查演示 -http://jsfiddle.net/S8g4E/6/

使用 css-

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}
小开

你可以使用浮动来下推内容:

Http://jsfiddle.net/s8g4e/5/

你有一个固定大小的容器:

#container {
width: 300px; height: 300px;
}

允许内容在浮动旁边流动。除非我们将浮动设置为全宽:

#up {
float: left;
width: 100%;
}

虽然 #up和 #down共享最高位置，但是 #down的内容只能在浮动 #up的底部之后开始:

#down {
height:100%;
}​
小开

我的答案只使用 CSS，并且不使用 overflow: hide 或 display: table-row。它要求第一个孩子确实有一个给定的高度，但在你的问题中，你说只有第二个孩子需要有它的高度没有指定，所以我相信你应该找到这个可以接受的。

#container {
width: 300px;
height: 300px;
border: 1px solid red;
}


#up {
background: green;
height: 63px;
float: left;
width: 100%
}


#down {
background: pink;
padding-top: 63px;
height: 100%;
box-sizing: border-box;
}
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">Text<br />Text<br />Text<br /></div>
</div>

小开

我问这个问题已经快两年了。我刚刚想出了解决这个问题的 css calc () ，我认为如果有人有同样的问题，添加它会很好。(顺便说一下，我最后使用的是绝对位置)。

Http://jsfiddle.net/s8g4e/955/

这是 CSS

#up { height:80px;}
#down {
height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

更多信息请点击: http://css-tricks.com/a-couple-of-use-cases-for-calc/

浏览器支持: http://caniuse.com/#feat=calc

小开

摘要

我没有找到一个完全令人满意的答案，所以我必须自己找出来。

我的要求:

  • 当元素的 内容大小是 或大或小而不是 剩余空间大小时(在第二种情况下，滚动条应该是 展示) ，元素应该占用 没错剩余的空间;
  • 解决方案应当在 计算父高和 没有具体说明时工作;
  • calc()不应该使用 作为另一个元素大小的剩余元素 什么都不该知道;
  • 应该使用现代的 和 熟悉的布局技术，如 弹性箱。

解决办法

  • 变成柔性箱 所有有计算身高的直系父母(如果有的话)和 指定高度的下一个父级;
  • 指定 flex-grow: 1到 所有有计算身高的直系父母(如果有的话)和 元素，这样当元素内容大小较小时，它们将占用所有剩余的空间;
  • 指定 flex-shrink: 0到 所有高度固定的弹性物品，这样当元素内容大于剩余空间大小时，它们不会变小;
  • 指定 overflow: hidden到 所有有计算身高的直系父母(如果有的话)以禁止滚动并禁止显示溢出内容;
  • 将 overflow: auto指定为 元素，以便在其中启用滚动。

JSFiddle (元素具有计算高度的直接父元素)

JSFiddle (简单情况: 没有具有计算高度的直接父级)

小开 
<div class='parent'>
<div class='child'>
<div class='child last'>
</div>


<style>
.parent {
display: flex;
flex-direction: column;


.child {
&.last {
flex-grow: 1;
}
}
}
</style>

提交答案