让DIV（高度）占据父剩余高度让DIV（高度）占据父剩余高度(Make div (height) o

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的弹性框布局模块（ flexbox ）现在是很好的支持，并且可以很容易实现。 因为它是灵活的，它甚至还可以当#up没有规定的高度上。

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

需要注意的是对于一些Flexbox的性质IE10和IE11支持可车是很重要的，和IE9或下方没有支撑可言。

计算的高度

另一个简单的办法是使用CSS3 calc功能单元， 如阿尔瓦罗在他的回答所指出的 ，但它需要的第一个孩子的高度是一个已知值：

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

它是相当广泛的支持，唯一显着的例外是<= IE8或Safari 5（不支持）和IE9（部分支持）。 其他一些问题，包括使用结合钙与变换或箱阴影 ，所以一定要测试在多个浏览器，如果这是最需要关注的。

其他替代品

如果需要旧的支持，您可以添加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计算（）。 （顺便说一下我结束了使用绝对位置）。

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，并且它不使用溢出：隐藏或显示：表行。 它要求第一个孩子确实有一个给定的高度，但在你的问题你的状态，只有第二个孩子需要有没有指定其高度，所以我相信你应该觉得这是可接受的。

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:

除非我误解，你可以添加height: 100%; 和overflow: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将描绘那个漂亮的清楚。

Answer 6:

你可以使用花车的内容推送下来：

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

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

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

内容是允许旁边流向浮动。 除非我们设置了浮到全宽：

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

虽然#up和#down分享榜首的位置， #down的内容只能在浮动的底部后开始#up ：

#down {
    height:100%;
}​

Answer 7:

我不知道这完全可以利用CSS来实现的，除非你在排序与幻想作假的舒适。 也许用约什拜见的答案，并设置#container到overflow:hidden 。

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

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

文章来源: Make div (height) occupy parent remaining height