7

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?

Andreas Grafen
  • 105
  • 1
  • 2
  • 9
  • 1
    If you want to calculate the height then you should use Jquery for this. Else you need to keep a fixed height for that nav element. – Taniya Dec 14 '16 at 12:58
  • okay thank you! since i'm new to all of this.. do you maybe have an example of how i could do this? otherwise.. i guess need to find out somehow. – Andreas Grafen Dec 14 '16 at 13:01
  • 1
    This is what the measurement units vh and vw were invented for, take a look at those. – Kyle Dec 14 '16 at 13:03
  • Check this: http://stackoverflow.com/questions/10907455/jquery-changing-height-based-on-another-element – Shobhit Srivastava Dec 14 '16 at 13:06

2 Answers2

8

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.

tango bango
  • 181
  • 2
  • 13
  • One of the best !!! It doesn't work for me with 100%, but works greate with 100vh... Thanks. – Bat Feb 13 '20 at 09:04
3

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

Flink
  • 1,008
  • 1
  • 13
  • 23
  • interestingly it has nothing to do with the screen size tho. on my 1920x1080 screen at home tha nav is 44px in height at work i do have the same monitor and the same operating system but the nav is only 36px in height. obviously the content is the same aswell. a 16pt icon-font and a padding of 10px for top and bottom. i actually have no idea why there is a height difference.. – Andreas Grafen Dec 14 '16 at 15:57
  • Well, there are other conditions like resolution you could try out, but if you really can't figure out what causes the nav's size you'll have to go with jQuery or Javascript. – Flink Dec 15 '16 at 11:46
  • yup. i'm currently trying to get this to work. but thanks for your help anyways, might come in handy if i want to look at the page on mobile devices. (: – Andreas Grafen Dec 15 '16 at 16:09