remove bottom whitespace from iframe

Question

I have a menu that changes the src location of an iframe when a selection is clicked. There is a small bit of white space at the top (under the top bar) and bottom of the page that I can't seem to get rid of.

I have read other answers here and tried changing the div around the iframe to display:flex;, which fixed the issue momentarily until I edited the menu a bit, which made the white spaces return again. I couldn't find any other answers on stackoverflow that have worked. There is no open paragraph tag causing the issue, like some other answers suggested. I also tried changing/adding display:block; to the iframe to no avail.

Here is the div and enclosed iframe HTML:

<div class="frameBox">
   <iframe src="example.html" frameborder="0" id="frame"></iframe>      
 </div>

Here is the CSS for the frameBox class:

.frameBox {
    width: 100%;
    height: calc(100vh - 8vh);
    background-color: #fff;
    position: fixed;
    top: 7vh;
    right: 0;
    z-index: 1;
    overflow-y: auto;
    display: flex;
}
.frameBox iframe{
    width: 100%;
    height: calc(100vh - 8vh);
    top: 0vh;
}

Any help would be appreciated as I can't seem to figure it out.

Answer 1

I think the cause of that whitespace is you set the framebox top: 7vh; and it's position: fixed;

I used iframe before and i hope this could will help you.

1. Change position: fixed; to position: absolute;
2. Change the height of your .frameBox from height: calc(100vh - 8vh); to height: 100%;
3. The content of your iframe should be width: 100%; only.
4. Remove this z-index: 1;(It seems that you don't needed it)
5. Adding top: 0; bottom: 0; right: 0; left: 0; will stretch the i frame and leaving no whitespace.

Here's how:

.frameBox {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y: auto;
    display: flex;
}
.frameBox iframe{
    width: 100%;
}

<div class="frameBox">
    <iframe src="example.html" frameborder="0" id="frame"></iframe>      
  </div>