删除iframe下的空白

Question

我目前正在尝试在调整大小时删除iframe下方的空白区域。 我主要使用CSS的Bootstrap。 目标是让iframe占据导航栏下方100％的页面。

iframe被切断和空格拖尾的示例

这就是我所说的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：隐藏

谢谢。

Answer 1

• 将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