How Can I Make an Iframe Dynamically Fill Remaining Page Height with CSS Only?

Dynamic Page Height Management for Iframes with CSS

Question:

Achieving an iframe that seamlessly fills the remaining height of a webpage and automatically adjusts to browser resizing has proven challenging. Despite attempts to use height:100% and margin/padding techniques, an unnecessary vertical scrollbar persists due to the iframe attempting to occupy the entire page height, including the header. How can this issue be resolved solely with CSS?

Answer:

Updated in 2019:

Flexbox has emerged as the most reliable and widely supported solution for this dilemma.

CSS Code:

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; }

HTML Structure:

<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>

By implementing flexbox, the iframe will automatically expand to fill the remaining space below the header. It will adjust its height dynamically as the browser window is resized, ensuring a responsive and visually pleasing layout.

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