删除iframe下的空白

Question

I am currently trying to remove white space below my iframe when resizing. 我目前正在尝试在调整大小时删除iframe下方的空白区域。 I am mainly using Bootstrap for CSS. 我主要使用CSS的Bootstrap。 The goal is to have the iframe take 100% of the page below the navbar. 目标是让iframe占据导航栏下方100％的页面。

Example of iframe being cut off and white space trailing iframe被切断和空格拖尾的示例

This is how I am calling the 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>

The only other element in the page is the navbar. 页面中唯一的其他元素是导航栏。

I have tried the following: Changing the iframe to display:block height and width:100% overflow:hidden overflow-y:hidden 我尝试了以下操作：将iframe更改为显示：块高度和宽度：100％溢出：隐藏溢出-y：隐藏

Thank you. 谢谢。

Answer 1

Use h-100 class for the html tag. 将h-100类用于html标签。
Use d-flex flex-column h-100 for the body. 对身体使用d-flex flex-column h-100 。
Use flex-grow-1 for the embed-responsive so that it takes the rest of the available space. 对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>

You need to use bootstrap-4.1 您需要使用bootstrap-4.1

删除iframe下的空白

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-02 03:18:08

删除iframe下的空白

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-02 03:18:08

解决方案1
0 已采纳 2018-07-02 03:18:08