为什么垂直滚动条会出现在iframe的父级中？

Question

我想在一个元素内创建一个iframe。 iframe应该填充整个元素。

HTML代码：

<div class="parent">
  <iframe class="child" src="https://example.com"></iframe>
</div>

样式定义：

.parent {
  background: red;
  width: 200px;
  height: 200px;
  overflow:auto;
}

.child {
  width:100%;
  height:100%;
  border: 0;

  margin: 0;
  padding: 0;
}

不幸的是，出现了不必要的垂直滚动条：

Jsfiddle：https://jsfiddle.net/4hqjt9w3/1/

如何在没有overflow: hidden或绝对定位的情况下摆脱父元素上的滚动条？

Answer 1

使iframe成为一个块元素。默认情况下，其显示的计算值是内联so you will face a whitespace issue at the bottom，它将产生溢出：

.parent {
  background: red;
  width: 200px;
  height: 200px;
  overflow:auto;
}

.child {
  display:block;
  width:100%;
  height:100%;
  border: 0;
  
  margin: 0;
  padding: 0;
}

<div class="parent">
  <iframe class="child" src="https://example.com"></iframe>
</div>

Answer 2

您是指滚动属性吗？用下面的代码替换您的代码。

<div class="parent">
  <iframe class="child" src="https://example.com" scrolling=no></iframe>
</div>