css - CSS元素高度减去高度变化的元素的高度

Question

大家好!

css3是否可以进行动态高度计算？我什么都找不到。.但是也许我只是在搜索时使用了错误的术语。

问题:我有一个网站，我想在其中包含高度为100％减去导航元素高度的iframe。不幸的是，导航元素的高度并不总是相同的(一个设备上为44px，另一设备上为36px，依此类推)

有没有一种方法可以计算出来？还是我需要固定导航元件的高度才能使其正常工作？

Answer 1

您可以在两个元素的包装上使用display: flex属性。

html, body, #wrapper {
  height: 100%;
}

#wrapper {
  display: flex;
  flex-direction: column;
}

#frame-fill {
  flex-grow: 1;
}

<div id="wrapper">
    <div>HEADER DYNAMIC</div>
    <iframe id="frame-fill" src=''></iframe>
</div>

确保您在寻找浏览器对flex的支持。它是一个较新的概念。