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

Question

大家好！

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

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

有办法计算吗？还是我需要修复导航元素的高度才能使其正常工作？

Answer 1

好的！我假设导航元素的高度取决于屏幕尺寸，为此您可以通过媒体查询提供不同的高度。所以你只需要确定元素高度变化的大小或宽度：

    /*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/css3_pr_mediaquery.asp

Answer 2

您可以在两个元素的包装上使用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 的支持。这是一个较新的概念。

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

css element height minus height of a element with changing height

css

height

calc

calculation