使div（高度）占据父级剩余高度

http://jsfiddle.net/S8g4E/

我有一个有两个孩子的集装箱div 。 第一个孩子有一个给定的高度。 我怎样才能让第二个孩子在没有给出具体身高的情况下占据集装箱的“自由空间”呢？

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

---

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

但我不想给绝对地位 。

Answer 1

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

样品

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

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

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

Answer 4

检查演示 – 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;} 

Answer 5

你可以使用浮动来推送内容：

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

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

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

内容被允许stream动到一个浮动。 除非我们将float设置为全宽：

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

当#up和#down分享最高的位置时， #down的内容只能在浮动的底部#up之后开始：

 #down { height:100%; }​ 

Answer 6

除非我误解，否则可以加上height: 100%; 和overflow:hidden; 到#down 。

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

现场演示

编辑：因为你不想使用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; }​ 

现场演示

注意：您已经说过要#down高度是#container #up高度减去#up高度。 display:table; 解决scheme完全是这样的， 这jsfiddle将描绘得很清楚。

Answer 7

我不确定它可以完全用CSS来完成，除非你很舒服地用幻想来伪装它。 也许使用Josh Mein的答案，并将#container设置为overflow:hidden 。

为了值得，这是一个jQuery解决scheme：

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