Question

我只想知道为什么100％高度和大小（根据网络检查员）等于父级的iframe会导致滚动条出现。

我发现了一些关于这个主题的问题，虽然似乎有解决方法，但到目前为止，我还没有看到有关为什么会发生这种情况的任何解释。

绝对清楚：我不是在寻找解决方案。我的问题是 为什么 这种情况发生。它似乎与我尝试过的浏览器保持一致，所以我假设某些网络标准可以解释这种看似奇怪的行为。

#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 1

产生滚动条的不是iframe，而是

之后的空白

如果您不想看到它，请使用

* { line-height: 0; }

如果不起作用，请尝试添加

iframe { display: block; }

太。默认情况下，iframe会呈现为内联元素（iframe ='inline frame'），因此会出现导致问题的行高。

为什么大小相等的iframe导致父div滚动？

1 个答案: