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

时间:2018-06-26 22:07:17

标签: html css

我想在一个元素内创建一个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;
}

不幸的是,出现了不必要的垂直滚动条:

enter image description here

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

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

2 个答案:

答案 0 :(得分:1)

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

enter image description here

.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>

答案 1 :(得分:-2)

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

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