How to Make an Iframe Fill the Remaining Height of its Container Without JavaScript?

Make Iframe to Fit 100% of Container's Remaining Height without JavaScript

When designing a web page with both a banner and an iframe, achieving a layout where the iframe automatically adjusts to fill the remaining height can pose a challenge.

Initial Attempt

Setting the iframe's height to "100%" seems like a straightforward solution. However, this approach attempts to fill the entire page height, including the banner area. As a result, an unnecessary vertical scrollbar appears.

Using CSS Margin and Padding

While CSS margin and padding can effectively fill the remaining height for DIV elements, this strategy does not work as expected for iframes.

Solution

To resolve this issue, consider using flexbox, a CSS layout module that offers a reliable solution for this scenario. Here's a code sample using flexbox:

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>

This flexbox layout ensures that the banner (.first-row) has a fixed height, while the iframe (.second-row) expands to fill the remaining height. The "flex-grow" property instructs the iframe to grow to occupy any available space.

This technique effectively makes the iframe 100% of the container's remaining height, adapting seamlessly to browser resizing.

The above is the detailed content of How to Make an Iframe Fill the Remaining Height of its Container Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!