使div（height）占据父级剩余高度 [英] Make div (height) occupy parent remaining height

问题描述

http://jsfiddle.net/S8g4E/

我有一个包含两个孩子的容器 div 。第一个孩子有一个给定的高度。如何让第二个孩子占据容器 div 的自由空间而不给出特定高度？

在示例中，粉色 div 也应占据空格。

---

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

但我不想给予位置绝对。

解决方案

展开 #down 子以填充 #container 可以以各种方式完成，具体取决于您希望实现的浏览器支持以及 #up 是否具有定义的高度。

  .container {width：100px; height：300px; border：1px solid red; float：left;}。up {background：green;}。down {background：pink;} flexbox.container {display：flex; flex-direction：column;}。flexbox.container .down {flex-grow：1;} calc .up {height：100px;}。calc .down {height：calc（100％ -  100px）;}。 container {overflow：hidden;}。overflow .down {height：100％;}  

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

Flexbox

CSS3的弹性盒布局模块（ flexbox ）现在得到了很好的支持，可以很容易实现。因为它是灵活的，甚至在 #up 没有定义的高度时工作。

 code> #container {display：flex; flex-direction：column; } 
 #down {flex-grow：1; } 
  

重要的是要注意IE10&

计算的高度
$ b

另一个简单的解决方案是使用 CSS3 calc 功能单元， as Alvaro在他的回答中指出，但它要求第一个子级的高度为已知值：

  #up {height：100px; } 
 #down {height：calc（100％ -  100px）; } 
 

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

如果需要较早的支持，您可以添加 height：100％; 到 #down 会使粉红色的div完全高度，这会导致容器溢出，因为 #up 是推下来的。

或者，如果的高度< #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;} 
  

http://jsfiddle.net/S8g4E/

I have a container div with two children. The first child has a given height. How can I make the second child to occupy the "free space" of the container div without giving a specific height?

In the example, the pink div should occupy also the white space.

---

Similar to this question: How to make div occupy remaining height?

But I don't want to give position absolute.

解决方案

Expanding the #down child to fill the remaining space of #container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not #up has a defined height.

Samples

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.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="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>

Flexbox

CSS3's Flexible Box Layout Module (flexbox) is now well-supported and can be very easy to implement. Because it is flexible, it even works when #up does not have a defined height.

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

It's important to note that IE10 & IE11 support for some flexbox properties can be buggy, and IE9 or below has no support at all.

Calculated Height

Another easy solution is to use the CSS3 calc functional unit, as Alvaro points out in his answer, but it requires the height of the first child to be a known value:

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

It is pretty widely supported, with the only notable exceptions being <= IE8 or Safari 5 (no support) and IE9 (partial support). Some other issues include using calc in conjunction with transform or box-shadow, so be sure to test in multiple browsers if that is of concern to you.

Other Alternatives

If older support is needed, you could add height:100%; to #down will make the pink div full height, with one caveat. It will cause overflow for the container, because #up is pushing it down.

Therefore, you could add overflow: hidden; to the container to fix that.

Alternatively, if the height of #up is fixed, you could position it absolutely within the container, and add a padding-top to #down.

And, yet another option would be to use a table display:

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

这篇关于使div（height）占据父级剩余高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！