Question

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

Example of iframe being cut off and white space trailing

这就是我调用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作为正文。
将flex-grow-1用作embed-responsive，以便占用剩余的可用空间。

<!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

删除iframe下的空白

1 个答案: