为什么垂直滚动条会出现在iframe的父级中? [英] Why does a vertical scrollbar appears in the parent of the iframe?

问题描述

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

I would like to create an iframe inside an element. The iframe should fill the whole element.

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;
}

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

Unfortulately an unnecessary vertical scrollbar appears:

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

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

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

How is it possible to get rid of the scrollbar on the parent element, without overflow: hidden, or absolute positioning?

推荐答案

使iframe成为一个块元素.默认情况下，其显示的计算值是内联底部出现空白问题，这将导致溢出:

Make the iframe a block element. By default its computed value of display is inline so you will face a whitespace issue at the bottom which will create the overflow:

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

这篇关于为什么垂直滚动条会出现在iframe的父级中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！