138

http://jsfiddle.net/S8g4E/

我有一个div有两个孩子的容器。第一个孩子有一个给定的身高。如何在div不给出特定高度的情况下让第二个孩子占据容器的“空闲空间”？

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

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

但我不想给出绝对位置。

4

8 回答 8

191

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

样品

.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-前缀，因此请确保验证您希望支持的浏览器中的功能。

弹性盒

CSS3 的灵活框布局模块 ( flexbox)现在得到了很好的支持并且可以很容易地实现。因为它很灵活，它甚至可以在#up没有定义高度的情况下工作。

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

需要注意的是，IE10 和 IE11 对某些 flexbox 属性的支持可能有问题，而 IE9 或更低版本则根本不支持。

计算高度

另一个简单的解决方案是使用CSS3calc功能单元，正如 Alvaro 在他的回答中指出的那样，但它要求第一个孩子的高度是一个已知值：

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

它得到了相当广泛的支持，唯一值得注意的例外是 <= IE8 或 Safari 5（不支持）和 IE9（部分支持）。其他一些问题包括将calc与transform或box-shadow结合使用，因此如果您担心，请务必在多个浏览器中进行测试。

其他选择

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

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

或者，如果 的高度#up是固定的，您可以将其绝对定位在容器内，并添加一个 padding-top 到#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;}​
于 2012-06-27T12:19:14.870 回答
25

我问这个问题已经快两年了。我刚刚提出了解决我遇到的这个问题的 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

于 2014-02-20T06:19:02.283 回答
12

抽象的

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

我的要求：

  • 当元素的内容大小小于或大于剩余空间大小时（在第二种情况下应显示滚动条），该元素应完全占用剩余空间；
  • 该解决方案应在计算父高度且未指定时起作用；
  • calc()不应该被使用，因为剩下的元素不应该知道其他元素的大小；
  • 应该使用现代和熟悉的布局技术，例如flexbox 。

解决方案

  • 将所有具有计算高度（如果有）的直接父级和指定高度的下一个父级变成弹性框；
  • 指定具有计算高度（如果有）和元素flex-grow: 1的所有直接父级，以便当元素内容大小较小时它们将占用所有剩余空间；
  • 指定所有固定高度的弹性项目，flex-shrink: 0这样当元素内容大小大于剩余空间大小时它们不会变小；
  • 指定所有具有计算高度（如果有）的直接父级overflow: hidden以禁用滚动并禁止显示溢出内容；
  • 指定元素overflow: auto以在其中启用滚动。

JSFiddle（元素具有计算高度的直接父级）

JSFiddle（简单案例：没有计算高度的直接父母）

于 2020-05-16T23:15:05.620 回答
5

我的答案只使用 CSS，它不使用溢出：隐藏或显示：表行。它要求第一个孩子确实有一个给定的高度，但是在你的问题中你说只有第二个孩子需要没有指定它的高度，所以我相信你应该觉得这是可以接受的。

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

于 2013-03-04T22:07:40.233 回答
2

除非我有误解，否则您可以添加height: 100%;andoverflow:hidden;到#down.

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

现场演示

编辑：由于您不想使用overflow:hidden;，因此可以display: table;用于这种情况；但是，在 IE 8 之前不支持它。（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;解决方案正是这样做的，这个 jsfiddle将非常清楚地描述这一点。

于 2012-06-27T12:16:07.193 回答
2

检查演示 - 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;}
于 2012-06-27T12:20:22.673 回答
1

您可以使用浮动来下推内容：

http://jsfiddle.net/S8g4E/5/

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

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

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

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

While#up和#downshare top position,#down的内容只能在浮动的底部之后开始#up：

#down {
    height:100%;
}​
于 2012-06-27T12:22:13.567 回答
-2

我不确定它是否可以纯粹用 CSS 来完成，除非你愿意用幻觉来伪装它。也许使用 Josh Mein 的答案，并设置#container为overflow:hidden.

对于它的价值，这是一个 jQuery 解决方案：

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);
于 2012-06-27T12:19:57.693 回答