Question

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

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

<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

bottom和iframe css属性不能在同一规则中一起使用。我的建议是将html，body和width代码height和100%设置为padding并将.mainBody, html, body { width: 100%; height: 100%; } body { padding: 5%; }设置为为了在视口范围之间获得所需的空间，可以使用boddy。

bottom: 20px;

iframe后面的空格归因于.mainBody规则中的padding属性。

如果您希望无论视口大小是否修复空白区域，您都可以将px从%更改为padding: 40px 10px 20px 10px;。此外，如果您不希望所有边的空白都相同，请记住填充可以设置为4个值（main）

几乎全屏iframe

1 个答案: