css element height minus height of a element with changing height

css height calc calculation
Andreas Grafen picture Andreas Grafen · Dec 14, 2016 · Viewed 9.8k times · Source

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

tango bango picture tango bango · Dec 14, 2016

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.

Related questions

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right now …

Read More
Make body have 100% of the browser height

I want to make body have 100% of the browser height. Can I do that using CSS? I tried setting height: 100%, but it doesn't work. I want to set a background color for a page to fill the entire browser window, …

Read More
make div's height expand with its content

I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside <!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> &…

Read More