使用剩余高度的100％

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

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

我试过表行，但是不提供高度，因此amcharts不适合任何调整大小（因为它没有高度/宽度的基础上）。

所以我想我的问题是，基于高度，什么是最好的方法使div使用100％的剩余空间，没有JS和没有使用表/表格/表格/表行样式？

编辑：这是问题的一个的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内的剩余高度。

来源

2015-07-10 williamvicary

我建议做一个例子，让人们可以看到你在说什么 – crazymatt

对的任何爱你的引擎是否支持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;

，你应该是好去。

演示，如果你的浏览器支持的话，为什么你想有一个无JS的解决方案（点击“全页”上看到效果）

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>

但我会问，既然你已经在使用jQuery？

来源

2015-07-10 20:37:55 Siguza

谢谢你的例子，不幸的是flex不工作（JSFiddle添加了我的原始问题），本质上amcharts库需要在父div中的高度或它不起作用（至少它看起来好像！）。 – williamvicary

这里是一个弹性的例子https://jsfiddle.net/53nfLfcr/1/ – williamvicary

你有没有试过[合并'.c'和'＃chartdiv']（https://jsfiddle.net/53nfLfcr/3/）？ – Siguza

使用剩余高度的100％

回答

相关问题