CSS元素高度减去元件的高度，高度变化

Question

是的，

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

问题：我有一个网站，我想在其中包括一个高度100％的iframe，减去了导航元素的高度。不幸的是，Nav-Element并不总是相同的高度（一个设备上的36px上的44px ..等等）

）

有没有办法计算？或者我需要修复Nav-Element的高度以使其正常工作？

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寻找浏览器支持。它是一个较新的概念。

Answer 2

当然！我假设Nav-Element高度取决于屏幕尺寸，您可以为其提供媒体查询的不同高度。因此，您只需要确定元素高度变化的大小或宽度：

    /*put your conditions here*/
    @media (min-height: 500px), (min-width: 580px) {
        iframe{
            height: calc(100% - 44px);
        }
    }
    /*put your conditions here*/
    @media (max-height: 1000px), (min-width: 580px) {
        iframe{
          height: calc(100% - 36px);
        }
   }

更多信息：http：//www.w3schools.com/cssref/csss3_pr_mediaquery.asp