[英]Removing white space below iframe
我目前正在尝试在调整大小时删除iframe下方的空白区域。 我主要使用CSS的Bootstrap。 目标是让iframe占据导航栏下方100%的页面。
这就是我所说的iframe:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="site/index.html">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
页面中唯一的其他元素是导航栏。
我尝试了以下操作:将iframe更改为显示:块高度和宽度:100%溢出:隐藏溢出-y:隐藏
谢谢。
h-100
类用于html
标签。 d-flex flex-column h-100
。 embed-responsive
使用flex-grow-1
,以便占用剩余的可用空间。 <!DOCTYPE html> <html class="h-100"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"> </head> <body class="d-flex flex-column h-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <h1 class="mx-auto">iframe</h1> </nav> <div class="flex-grow-1 embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://getbootstrap.com/"> </iframe> </div> </body> </html>
您需要使用bootstrap-4.1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.