CSS元素高度减去具有可变高度的元素的高度

Question

大家好！

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

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

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

- Andreas Grafen

---

如果您想计算高度，那么您应该使用Jquery。否则，您需要为该导航元素保持固定高度。 - Taniya

好的，谢谢！ 因为我对这一切都很新，你能否给我一个例子，让我知道如何做呢？否则，我想我需要想办法找出来。 - Andreas Grafen

这就是为什么视窗高度和宽度计量单位被发明出来的原因，看一下它们。 - Kyle

请查看此链接：https://dev59.com/cmgv5IYBdhLWcg3wBMOg - Shobhit Srivastava

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 的浏览器。这是一个较新的概念。

- tango bango

---

其中之一最好！！！ 它对我来说不是100％有效，但在100vh上运行得非常好... 谢谢。 - Bat

Answer 2

好的！ 我假设导航元素高度取决于屏幕大小，因此您可以使用媒体查询为不同的屏幕大小设置不同的高度。因此，您只需要确定元素高度发生变化的尺寸或宽度：

    /*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

- Flink

---

有趣的是，这与屏幕尺寸没有任何关系。在我家里的1920x1080屏幕上，导航栏高度为44px，在工作中，我有同样的显示器和操作系统，但导航栏只有36px的高度。 显然，内容也是相同的。一个16pt的图标字体和上下各10像素的填充。我其实不知道为什么会有高度差异... - Andreas Grafen

好的，还有其他条件，比如分辨率，你可以尝试一下，但如果你真的无法弄清楚导航栏大小的原因，你就必须使用jQuery或Javascript。 - Flink

是的，我目前正在努力使其工作。但无论如何，还是谢谢你的帮助，如果我想在移动设备上查看页面，这可能会派上用场。(: - Andreas Grafen