Sometimes, we want to make an iframe fit 100% of the container’s remaining height with CSS.
In this article, we’ll look at how to make an iframe fit 100% of the container’s remaining height with CSS.
How to make an iframe fit 100% of the container’s remaining height with CSS?
To make an iframe fit 100% of the container’s remaining height with CSS, we use flexbox.
For instance, we write
<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>
to add a div with another div and iframe inside it.
Then we wirte
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;
}
to make the outer div a flex container with display: flex;
.
We make its flex direction vertical with flex-direction: column;
.
Then we make the iframe fill the remaining height with flex-grow: 1;
.
Conclusion
To make an iframe fit 100% of the container’s remaining height with CSS, we use flexbox.