css - Column Flex,子 iframe 100% 高度,显示父滚动
问题描述
在 div 有高度 100% iframe,父显示 Y 滚动。为什么它溢出?
.root{
position:absolute;
height:100%;
width:100%
}
iframe {
pointer-events: all;
width: 100%;
height: 100%;
border: 0;
overflow-y: hidden !important;
overflow-x: hidden !important;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column root">
<div style="background:yellow">
Head
</div>
<div class="flex-grow-1 overflow-auto">
<iframe frameborder="0" allowfullscreen src="https://www.portotheme.com/"></iframe>
</div>
</div>
iframe 设置为高度:100%。为什么父级显示滚动? JSF中。
解决方案
overflow-y
将属性添加到根类。那是,overflow-y: hidden;
.root{
overflow-y: hidden;
}
HTML 的变化
<div class="d-flex flex-column root">
<div style="background:yellow">
Head
</div>
<div class="h-100">
<iframe frameborder="0" allowfullscreen src="https://www.portotheme.com/"></iframe>
</div>
</div>
Codepen demo
JSFiddle demo
推荐阅读
- java - Micronaut 数据本机图像:不存在 [io.micronaut.data.operations.PrimaryRepositoryOperations] 类型的 bean
- c# - 是否可以将 ASP.NET 成员资格与在 ASP.NET Identity 2.0 中创建的表一起使用以进行身份验证?
- reactjs - React Typescript取消对打字稿错误的执行中断
- python - 使用请求获取重定向 URL
- linux - cron 条目执行了两次
- javascript - 如何将对象键转换为 Javascript 中键值倍数的元素数组?
- mysql - 了解在 MySQL 中设置 ONLY_FULL_GROUP_BY sql 模式的非标准 GROUP BY
- javascript - 单击内容中的链接时,Twitter Bootstrap 手风琴崩溃
- python - Flask SQL - 插入记录时是否可以动态设置列
- javascript - 提交表单时页面重新加载,控制台上没有打印