flexbox如何找出剩余的空间＆＃34;绝对单位

Question

我有这个问题，我不知道如何面对。

有一个flexbox，面向列，有三个子项：top，middle和bottom。在中间的孩子我需要嵌套第三方组件，要求以绝对单位（例如px）知道要正确呈现的容器大小。

我能想到的唯一解决方案是在CSS引擎计算它之后以某种方式找出中间容器的像素大小，然后使用js来设置大小。

更糟糕的是，如果将其高度设置为百分比

，则该组件无法正常工作

所以，

<div id="componentPlaceHolder" style="height: 10%;"></div>

不起作用。你必须做点什么

<div id="componentPlaceHolder" style="height: 455px;"></div>

我如何实现这一目标？

感谢

Answer 1

您可以使用JS来确定中间div的高度：

var middleDivHeight = getElementById("middleDivId").css( "height" );

这将在px中返回一个数字，然后您可以使用JS：

设置组件的高度

document.getElementById("componentId").style.height = middleDivHeight;