Removing white space below iframe
Question
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.
1 answers
solution1
0 ACCPTED 2018-07-02 03:18:08
- Use
h-100class for thehtmltag. - Use
d-flex flex-column h-100for the body. - Use
flex-grow-1for theembed-responsiveso 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.