iframeの下の隙間

謎の隙間

iframeを使って子ページに別のページを表示するページを作っていて、ほぼ全面を子要素で覆う仕様にしていました。
しばらくして気付いたのですが、下に謎の隙間がある！
高さを100%にしていたのですが、Chromeで見てもpaddingやmarginは0になっているし謎です。

<body>
  <div id="wrap">
    <iframe id="main" src="index.html"></iframe>
  </div>
</body>

div#wrap {
  width: 100%;
  height: 100%;
}
iframe#main {
  width: 100%;
  height: 100vh;
  overflow: scroll;
}

これをブラウザで確認すると…。

この下の白い部分です！
ほんのちょびっと隙間ができています。

いろいろ試したり調べたりしているうちに解決しました笑

iframe#main {
  vertical-align: bottom;
}

この1行を追加するだけでiframeが画面サイズにぴったり合うようになりました。
下に隙間ができるときに怪しいのはvertical-alignらしいです…。