代码之家 › 专栏 › 技术社区 › Iter Ator

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

css html

Iter Ator · 技术社区 · 6 年前

我想在元素中创建一个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 ,还是绝对定位?

2 回复 | 直到 6 年前

Temani Afif 6 年前

使iframe成为块元素。默认情况下,其计算的显示值为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>

Nick 6 年前

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

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前