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

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

Problem:

In creating a web page with both a banner and an iframe, it is desirable for the iframe to fill the remaining page height automatically as the browser resizes. Is this achievable purely with CSS, without JavaScript?

Solution:

In 2019, flexbox emerged as the optimal solution for this scenario. Flexbox offers excellent support across browsers and provides an effective means of controlling the layout of the page elements.

Using flexbox, you can define a parent container to be sized 100% in both height and width, with a flex-direction set to column. This arranges the elements vertically.

Within the parent container, create two rows:

1. First Row: Give it a fixed height or content that determines its height.
2. Second Row: Set its flex-grow property to 1 to make it expand to fill the remaining space.

Code Snippet:

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>

With this setup, the iframe in the second row will automatically adjust its height to occupy the remaining space in the page, even as the browser is resized.

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