0

I am currently trying to remove white space below my iframe when resizing. I am mainly using Bootstrap for CSS. The goal is to have the iframe take 100% of the page below the navbar.

Example of iframe being cut off and white space trailing

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

Thank you.

Stephen Stone
  • 1
  • 4
  • possible duplicate of : https://stackoverflow.com/questions/51051985/why-does-a-vertical-scrollbar-appears-in-the-parent-of-the-iframe/51052023#51052023 – Temani Afif Jul 01 '18 at 19:43
  • share more CSS code – Temani Afif Jul 01 '18 at 19:43
  • Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) – Andrzej Ziółek Jul 01 '18 at 19:46

1 Answers1

1
  • Use h-100 class for the html tag.
  • Use d-flex flex-column h-100 for the body.
  • Use flex-grow-1 for the embed-responsive so that it takes the rest of the available space.

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

mahan
  • 12,366
  • 5
  • 48
  • 83