使div(高度)占据父级剩余高度

Question

http://jsfiddle.net/S8g4E/

我有一个div有两个孩子的容器.第一个孩子有一个给定的高度.如何在div不给出特定高度的情况下让第二个孩子占据容器的"自由空间" ？

在示例中,粉红色div也应占据白色空间.

---

与此问题类似:如何让div占据剩余高度？

但我不想绝对给予立场.

Answer 1

根据您希望实现的浏览器支持以及是否具有已定义的高度#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-前缀,因此请确保验证您希望支持的浏览器中的功能.

Flexbox的

CSS3的Flexible Box Layout Module(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是固定的,您可以将其绝对放置在容器内,并添加填充顶部#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;}?

Answer 2

我问这个问题差不多两年了.我刚刚想出了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

Answer 3

抽象的

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

我的要求：

• 该元件应采取准确的剩余空间既可以当其含量大小为更小或更大的比剩余空间尺寸（在第二种情况下的滚动条应该被显示）;
• 该溶液应该工作时，父高度被计算，并且没有指定;
• calc()不应该被使用，因为剩余的元素不应该知道其他元素的大小；
• 应该使用现代和熟悉的布局技术，例如flexboxes。

解决方案

• 将所有具有计算高度的直接父级（如果有）和指定高度的下一个父级转换为 flexboxes ；
• 指定flex-grow: 1到所有直接父母计算高度（如果有的话）和元素，所以当元素含量尺寸更小，他们会占用所有剩余空间;
• 指定flex-shrink: 0要使用固定的高度所有Flex项目，使他们不会成为当元素含量的大小大于剩余空间大小大小;
• 指定overflow: hidden到所有直接父母计算高度（如果有的话），以禁用滚动和禁止显示溢出的内容;
• 指定overflow: auto给该元素，以使里面滚动。

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

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

Answer 4

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

html

<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

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

http://jsfiddle.net/S8g4E/288/