CODEWITHSUNDEEP
htmlcssiframe
You Old Fool
You Old Fool

Reputation: 22950

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>

Upvotes: 0

Views: 822

Answers (1)

agustin
agustin

Reputation: 2397

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.

Upvotes: 4

Related Questions