billynoah billynoah - 8 months ago 42
CSS Question

Why does an iframe of equal size cause parent div to scroll?

I'd simply like to know why an iframe with 100% height and a size (according to web inspector) equal to parent causes a scroll bar to appear.

I found a few questions regarding this topic and though there seem to be workarounds, but so far I've yet to see any explanation about why this happens.

To be absolutely clear: I am not looking for a solution. My question is about why this happens. It seems to be consistent across browsers I've tried so I'm assuming there are web standards somewhere which account for this seemingly odd behavior.

#content {
height: 90vh;
.wrapper {
width: 100%;
height: 100%;
overflow: auto;
background-color: lightblue;
iframe {
width: 100%;
height: 100%;
border: none;

<div id="content">
<div class="wrapper">


It's not the iframe that produces the scrollbar, it's the whitespace after it

If you don't want to see it, use

* { line-height: 0; }

If it doesn't work try adding

iframe { display: block; }

too. Iframes are rendered as inline elements by default (iframe = 'inline frame'), and thus, have a line-height which causes the issue.