Question

我有一些要固定在iFrame和页脚中的内容，但是我想根据用户的屏幕尺寸更改页脚的大小，并且希望页脚图形填充页脚。页脚具有使用background-size：cover的背景图像。因此，当用户使用宽屏时，页脚应与屏幕一样宽，高度应保持背景图像的长宽比。

我的HTML看起来像这样：

<div id="content">
  <iframe id="xyz">
  </iframe>
</div>
<div id="footer">
  <div id="innerFooter">
  </div>
</div>

我的CSS如下：

#content {
    top: 0px;
    left: 0;
    position: relative;
    border: 1px solid #6AA3D4;
    width: 100%;
    height: 100%;
}

iframe {
    width: 100%;
    height: 100%;
}

#footer {
    width: 100%;
    height: 100%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    width: 100vw;
}
.innerFooter {

    background: url("images/footerMain.png");

    height: 100%;
    width: 100%;
    background-size: cover;
    position: relative;
    display: inline-block;
}

我希望页脚位于页面底部并适当调整大小（高度/宽度）以完全适合背景图形。我还希望我的主要内容（iframe）是页面到页脚顶部的整个高度。

现在我的iframe尚未达到页面的整个高度。

Answer 1

使用position:absolute而不是position:fixed来添加页脚，并且高度应以像素为单位，而不是％。

#footer {
    width: 100%;
    height: 60px; /*changed percent to pixel*/
    background-color: #fff;
    bottom: 0;
    position: fixed; /*changed absolute to fixed*/
    width: 100vw;
}

有关CSS定位的更多信息：Here

基于固定页脚的iFrame高度（带有背景尺寸的封面）

1 个答案: