html - 几乎全屏的iframe

Question

我需要一种方法来用 iframe 填充几乎整个页面。但是正如您在这里看到的，iframe 之后有一个很大的空白区域:

http://jsfiddle.net/mW9WF/896/

如何删除空格？ 这是我的代码:

<div class="header" >
    &nbsp;
</div>
    <iframe class="mainBody" src="http://www.repubblica.it/tecnologia/2015/07/16/news/cellulari_e_tariffe_estive_gigabyte_extra_e_servizi_di_intrattenimento_ecco_le_offerte-119221137/"></iframe>

<div class="footer">
    &nbsp;
</div>


body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;

    position: absolute;
    bottom: 0;
    width:100%;
}

Answer 1

top 和 bottom css 属性不应该在同一规则中一起使用。我的建议是设置 iframe、html 和 body 标签 width 和 height到 100% 并为 body 设置一个 padding 以获得视口(viewport)限制之间所需的空间。

.mainBody, html, body {
    width: 100%;
    height: 100%;
}

body {
    padding: 5%;
}

iframe 后的空白是由于 .mainBody 规则中的 bottom: 20px; 属性造成的。

如果您希望无论视口(viewport)大小如何都固定空白，您可以将 padding 从 px 更改为 %。此外，如果您不希望所有边的空白都相同，请记住可以将 padding 设置为 4 个值(padding: 40px 10px 20px 10px;)