How Can I Make an Iframe Fill the Remaining Height of a Page Using Only CSS?

Make Iframe Fill Remaining Height Seamlessly Without JavaScript

When designing a web page with a banner and an iframe, one may desire for the iframe to automatically resize to occupy the entire remaining page height. Achieving this with CSS is feasible.

Originally, setting the iframe's height to 100% seemed logical but resulted in an iframe attempting to fill the entire page, including the banner's height. This led to an unnecessary vertical scrollbar. Moreover, using CSS margin and padding on the DIV to reserve the remaining height worked for DIV but not for iframes.

As of 2019, the optimal solution is flexbox. It enjoys wide support across browsers:

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }

<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

The above is the detailed content of How Can I Make an Iframe Fill the Remaining Height of a Page Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!