billynoah billynoah - 6 months ago 24
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">
<iframe></iframe>
</div>
</div>




Answer

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.

Comments