1

I have a website that has a title, navigation bar, and a paragraph of text, followed by an iframe. I want to set the height of the iframe to the remaining height of the screen and set the iframe width based on this height.

I have a JS function doing it when the website loads, but want to do this using CSS so it is more responsive. This tutorial shows how to do this based on width of the screen. It makes the height 56.25% of the screen width. I want to do something similar but scale the iframe so it is as large as possible without having users scroll down to see the whole iframe.

In my JS function, I have everything not including the iframe wrapped in <div class="header"> and get that height with $('.header').height(). Then I just subtract this from the window height to get the iframe height and calculate the width based on a ratio (i.e. 16/9 for a video). How can this be done in CSS?

I've tried setting the height to 100% and not specifying the width, which was suggested elsewhere. This didn't work. My iframe is essentially embedding another HTML document, not a video.

Matt
  • 1,792
  • 5
  • 21
  • 33
  • You might find this helpful: [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) – showdev Jun 30 '17 at 19:56

0 Answers0