html - 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;
}