css element height minus height of a element with changing height

Question

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.

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)

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?

Answer 1

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

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.

Answer 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