如何让我的 iframe 卡在使用 css 的固定页眉和页脚之间？

Question

我有一个带有 iframe 和页眉和页脚的屏幕。我想让它变大，所以它适用于每个屏幕。这是我的 html 和 css：

html:

<header class="topbar">
    <h2>Header</h2>
</header>

<section>
<iframe name="main" class="frame" src="login.php" scrolling="yes" frameborder="0">

</iframe>
</section>

<footer class="botbar">
       <h2>Footer</h2>
</footer>

css:

iframe:focus { 
outline: none;
}

iframe[seamless] { 
display: block;
}

.topbar { 
background-color: dodgerblue;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
height: 74px;
text-align: center;
}

.botbar { 
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: coral;
height: 74px;
text-align: center;
}

.frame {
position: fixed;
width: 100%;
height: 80%; 
float: inherit;
margin-top: 74px;
}

当我运行代码时，我得到了一个很好的布局，但是当我缩小屏幕时，iframe 的底部消失在我的页脚下方。这是因为我的页脚保持不变，但我的 iframe 改变了大小。有没有办法让页脚看起来像页面的底部？

Answer 1

您可以使用 calc 将 iframe 高度设置为 100% 并从中删除两个 74px（页眉和页脚高度），如下所示：

.frame {
    position: fixed;
    width: 100%;
    height: calc(100% - 74px - 74px);
    float: inherit;
    margin-top: 74px;
    top: 0;
}