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

【问题标题】：Why does a vertical scrollbar appears in the parent of the iframe?为什么在 iframe 的父级中会出现垂直滚动条？
【发布时间】：2018-06-27 06:12:08
【问题描述】：

我想在元素内创建一个 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，或者绝对定位，如何去掉父元素上的滚动条？

【问题讨论】：

标签： html css

【解决方案1】：

使 iframe 成为块元素。默认情况下，它的 display 计算值为 inline 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>

【讨论】：

【解决方案2】：

你的意思是滚动属性吗？用下面的代码替换你的代码。

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

【讨论】：