Question

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

我面临的问题是100％在一个div中（与所述div中的其他元素一起）意味着当孩子div接受100％作为逐字并且使自己成为父div的100％时这不是实际意图 - 我希望它使用div中可用的剩余空间，而不是100％。

我已经尝试了表格行但是没有提供高度，因此amcharts不适用于任何调整大小（因为它没有基于其自身的高度/宽度）。 / p>

所以我想我的问题是，基于高度，使用100％剩余空间的div的最佳方法是什么，没有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？在我看来，这将是最简单，最干净的解决方案。

申请父母：

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;

和要伸展的孩子：

flex: 1;

你应该好好去。

演示，如果您的浏览器支持它（点击“整页”查看效果）

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>

但是我可以问你为什么要使用无JS解决方案，因为你已经在使用jQuery了？

使用100％的剩余高度

1 个答案: