height 100和iframe =两个滚动条

Question

我有一个：

<div style="height:100%">
<div id="menu" style="height:30px;width:100%">Ouhlala</div>
<iframe width="100%" frameborder="0" height="100%" src="baba"></iframe>
</div>

它向我展示了2个滚动条。 iframe的高度为100％，但最终为100％+ 30px。我不知道如何解决这个问题

Answer 1

您可以使用以下属性calc()：

<div class="container">
  <div id="menu" style="height:30px;width:100%">Ouhlala</div>
  <iframe frameborder="0" src="baba"></iframe>
</div>

CSS

.container iframe{
   height:calc(100% - 30px);
}

这可能是兼容性 _{check it here}