让 div (height) 占据父级剩余高度

Posted 2023-03-06

【中文标题】让 div (height) 占据父级剩余高度

【英文标题】：Make div (height) occupy parent remaining height

【发布时间】：2012-06-28 20:49:19

【问题描述】：

http://jsfiddle.net/S8g4E/

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

在示例中，粉红色的div 也应该占据空白区域。

---

类似这个问题：How to make div occupy remaining height?

但我不想给出绝对位置。

【问题讨论】：

我尝试将第二个孩子的身高设为 100%，但不起作用：jsfiddle.net/S8g4E/1

【参考方案1】：

我的答案只使用 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>

【参考方案2】：

摘要

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

我的要求：

当元素的

内容大小

小于或大于

剩余空间大小 /strong>（在第二种情况下，滚动条应该显示）；

当

计算父级高度

并且

未指定

时，该解决方案应该有效；

calc() 不应用作

作为剩余元素不应该知道任何事情关于其他元素的大小； 应该使用

现代

和

熟悉的布局技术

，例如

flexboxes

。

---

解决方案

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

---

JSFiddle (element has direct parents with computed height)

JSFiddle (simple case: no direct parents with computed height)

【参考方案3】：

扩展#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 的Flexible Box Layout Module (flexbox) 现在得到了很好的支持并且可以很容易地实现。因为它很灵活，它甚至可以在#up 没有定义的高度时工作。

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

请务必注意，IE10 和 IE11 对某些 flexbox 属性的支持可能存在问题，而 IE9 或更低版本根本不支持。

计算高度

另一个简单的解决方案是使用CSS3 calc 功能单元as Alvaro points out in his answer，但它要求第一个孩子的高度是一个已知值：

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

它得到了相当广泛的支持，唯一值得注意的例外是 calc 与 transform 或 box-shadow 结合使用，因此如果您担心，请务必在多个浏览器中进行测试你。

其他替代品

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

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

或者，如果#up 的高度是固定的，您可以将其绝对定位在容器内，并为#down 添加一个 padding-top。

另外一种选择是使用表格显示：

#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 高度。所以溢出隐藏不是我想要的。而且也不想使用绝对位置。谢谢！

@Alvaro，我添加了另一个选项，使用表格显示。这里的缺点是兼容性。附言绝对定位在具有position: relative; 的容器内的元素相对于容器而不是窗口定位它。所以，这应该是一个可行的选择。

Table-row 应该为您工作，请参阅this jsFiddle 以获取证据。绝对位置方法将无法产生与此小提琴相同的结果，因此我们可以将其从列表中删除（在这种情况下#down 和 #container 将具有相同的高度）。

你问了很多，@Alvaro。 CSS 不是脚本语言；它无法计算东西。你被幻想或 js 困住了。

@Quantastical，感谢您的帮助，但在您最近的编辑中，您只是复制了我发布的答案。至少有人提及它会很好。

【参考方案4】：

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

【讨论】：

我也一直在使用 CSS3 的 calc，其中广泛的浏览器支持不那么重要（IE8 及更低版本和 Safari 5 不支持它）。

有什么方法可以用动态#up 高度做类似的事情吗？

@AdamWaite，具有动态#up 高度，您将需要使用其他答案中描述的溢出解决方案。

【参考方案5】：

除非我误会，否则你可以将height: 100%; 和overflow:hidden; 添加到#down。

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

Live DEMO

编辑：由于您不想使用overflow:hidden;，因此可以在这种情况下使用display: table;；但是，在 IE 8 之前不支持它。(display: table; support)

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

Live DEMO

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

【讨论】：

我不希望#down 超过#container 高度

我刚刚注意到了。您可以添加overflow:hidden 来隐藏多余的内容。

我将复制/粘贴我对 MrSlayer 说的话：我希望 #down 具有 #container 高度 - #up 高度。所以溢出隐藏不是我想要的。而且也不想使用绝对位置。谢谢！

这样做的问题是，如果您在示例中还原两个 div，那么绿色 div 就在外面。

这根本不能回答问题。它声明“要占据所有剩余高度”，事件虽然占据了所有剩余高度，但会溢出。

【参考方案6】：

查看演示 - 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;

【讨论】：

您应该将height: 1px 添加到#up 以确保它占用最小的高度。这是display: table的浏览器支持：caniuse.com/css-table

能否请您告诉我如何在这个“更复杂”的示例中实现此解决方案，请：jsfiddle.net/fyNX4 非常感谢

【参考方案7】：

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

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

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

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

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

#up 
    float: left;
    width: 100%;

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

#down 
    height:100%;
​

【讨论】：

注意#up实际上覆盖了#down的顶部：jsfiddle.net/thirtydot/S8g4E/9

是的，它就是这样工作的。但如果 OP 在#up 上不需要圆形边框或其他花哨的东西，那么它可能是可以接受的。

这个解决方案很接近，但我希望 #down 有 #container height - #up height。 （在您的解决方案中#down height = #container height）。谢谢'

@Alvaro：为什么需要这样？这个解决方案在大多数情况下看起来是正确的，即使它只是一种错觉。

嗯，这个问题是从这个更“复杂”的例子中简化的例子：jsfiddle.net/fyNX4 没有用，不是吗？

【参考方案8】：

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

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

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

【讨论】：

谢谢，我一直在寻找纯 Css 解决方案。

没有理由投反对票。似乎有效的 JS 解决方案。它只是不是基于 css 的。