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

【问题标题】：css element height minus height of a element with changing heightcss元素高度减去高度变化的元素的高度
【发布时间】：2017-04-29 19:39:39
【问题描述】：

大家好！

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

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

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

【问题讨论】：

如果你想计算高度，那么你应该使用 Jquery。否则，您需要为该导航元素保持固定高度。
好的，谢谢！因为我对这一切都不熟悉..你可能有一个我怎么能做到的例子吗？否则..我想需要以某种方式找出答案。
这就是测量单位 vh 和 vw 的发明目的，看看这些。
检查这个：stackoverflow.com/questions/10907455/…

标签： css height calc calculation

【解决方案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);
        }
   }

【讨论】：

有趣的是，它与屏幕尺寸无关。在我家的 1920x1080 屏幕上，工作时导航高度为 44 像素，我确实有相同的显示器和相同的操作系统，但导航高度只有 36 像素。显然内容也是一样的。一个 16pt 的图标字体和一个 10px 的顶部和底部填充。我其实不知道为什么会有高度差异..
嗯，还有其他条件，比如分辨率，你可以试试，但如果你真的不知道是什么导致了导航的大小，你将不得不使用 jQuery 或 Javascript。
是的。我目前正试图让这个工作。但无论如何感谢您的帮助，如果我想在移动设备上查看页面，可能会派上用场。 (:

【解决方案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 的支持。它是一个较新的概念。

【讨论】：

最好的之一！它不适用于 100%，但适用于 100vh...谢谢。