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设置为height:100%。为什么父级显示滚动条? JSFiddle。
答案 0 :(得分:0)
添加到 root 类的 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