使用剩余高度的 100%

Question

我正在创建一个内部应用程序，因此浏览器兼容性限制不是一个大问题。我正在使用一个使用 jquery ui resizable 的 div 容器，因此任何给定的 div 的大小都是未知的。我也在使用图表库 (amCharts)，它需要 parent div 具有高度才能呈现图表。

我面临的问题是 div 中的 100%（与所述 div 中的其他元素）意味着而 child div 接受 100% 作为逐字记录并使自己成为 parent div 的 100% 这实际上不是意图 - 我希望它使用 div 中可用的剩余 space，而不是 100 %.

我试过 table-row 但是它没有提供高度，因此 amcharts 不能很好地调整大小（因为它没有 height/width 作为基础）。

所以我想我的问题是，根据身高，使 div 使用 100% 剩余 space 的最佳方法是什么，不使用 JS 也不使用 table/table-cell/table-row 风格？

编辑：这是问题的 JSFiddle： https://jsfiddle.net/2c8n1y04/

和 HTML:

<div class="a">
    <div class="b"><h3>Header</h3></div>
    <div class="c">
        <div id="chartdiv"></div>
    </div>
</div>

样式：

html,body,.c,#chartdiv
{
    height:100%
}

.a {
    height:300px;
    background-color: grey;
}
.b {
    background-color: yellow;
}
h3 {
    margin:0;  
}

JSFiddle 中还添加了一个使用 amcharts 库的图表，该库依赖于高度（否则呈现为 0 高度）。同样在代码库中，我使用 jquery-ui 可调整大小 ui（通过 gridstack），这意味着我无法定义高度，因为图表高度只需要拉伸到全部剩余高度div.

内

Answer 1

喜欢你的引擎支持flex吗？
在我看来，这将是最简单、最干净的解决方案。

适用于parent:

flex-direction: column;
display: flex;
/* or, if a prefixed version is supported, one of: */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;

并向 child 延伸：

flex: 1;

你应该可以开始了。

Demo，如果你的浏览器支持的话（点击"Full page"看效果）

html, body {
    height: 100%;
    margin: 0;
}
div {
    border: solid 1px #333;
    padding: 5px;
}
#a {
    margin: 10px;
    height: calc(100% - 40px);
    flex-direction: column;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#b {
    height: 100px;
    background: #FFE;
}
#c {
    flex: 1;
    background: #EFE;
}

<div id="a">
    <div id="b">Fixed</div>
    <div id="c">Flexible</div>
</div>

但是我可以问一下你为什么想要一个 no-JS 解决方案，因为你已经在使用 jQuery 了吗？

使用剩余高度的 100%

Use 100% of remaining height

html

amcharts