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

aye folks!

伙计们！

is it possible to have dynamic height calculation with css3? i couldn't find anything.. but maybe i'm just using the wrong terms for my search.

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

the problem: i have a site where i want to include an iframe with 100% height minus the height of a nav-element. unfortunately the nav-element isn't always the same height (44px on one device 36px on another.. and so on)

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

is there a way to calculate that? or do i need to fix the height of the nav-element to get this to work properly?

有没有办法计算？或者我是否需要修复nav元素的高度才能使其正常工作？

2 个解决方案

#1

You may use display: flex property on the wrapper of the two elements.

您可以在两个元素的包装上使用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>

Be sure that you look for browser support for flex. Its a newer concept.

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

#2

Sure! I'm assuming the nav-element height is dependant on screen size, for which you can give different heights with media queries. So you only need to determine the size or width at which the element height changes:

当然！我假设导航元素高度取决于屏幕大小，您可以通过媒体查询给出不同的高度。所以你只需要确定元素高度变化的大小或宽度：

    /*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);
        }
   }

More info: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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

#1