Question

我正在尝试显示响应式iframe窗口，该窗口在台式机和Android上正常运行，但在iOS（移动浏览器）上的iframe中看不到最后一行，看起来像是底部填充不起作用。

以下是链接：https://codesandbox.io/s/7jy8jx3o00

html：

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/styles.css" />
  </head>

  <body>
    <div id="app">
      <div class="top">Top Menu</div>
      <div class="iframeWrapper">
        <iframe src="/ifcontent.html"></iframe>
      </div>
    </div>
    <div class="bottom">Bottom Menu</div>
  </body>
</html>

css：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#app {
  min-height: 100%;
  height: 1px;
  box-sizing: border-box;
  padding-top: 50px;
}
.top {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: gray;
}
.bottom {
  position: fixed;
  bottom: 0;
  height: 70px;
  width: 100%;
  background: #8dc149;
}
.iframeWrapper {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 70px;
}
iframe {
  height: 100%;
  width: 100%;
  border: 0;
}

iOS上的iframe底部填充问题（移动设备浏览器）

0 个答案: