首页 > 解决方案 > iOS 上的 IFrame padding-bottom 问题(mobile-safari)

问题描述

我正在尝试显示响应式 iframe 窗口,这在桌面和 Android 上运行良好,但我在 iOS(移动 safari)上看不到 iframe 中的最后一行,看起来 padding-bottom 不起作用。

这是链接: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;
}

标签: htmlcssiframemobile-safari

解决方案


推荐阅读