css - height 100 and 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}