当在HTML5 doctype中包含一个全高度/宽度的iframe时,会添加一个无法删除的底部边框。这会为页面添加滚动条以适应边框。不幸的是,我受到以下限制:
是否有任何CSS或属性可以删除底部边框并删除外部(不必要的)滚动条?
- 需要使用iframe
- iframe位于占据整个屏幕的固定位置容器内部
- html和body具有overflow hidden
- 需要HTML5 doctype(删除doctype或切换到旧的doctype将修复滚动条问题)
- 需要保持#container上的overflow-y:auto和-webkit-overflow-scrolling:touch,因为iOS否则无法滚动框架(或好像不能使其滚动)。
是否有任何CSS或属性可以删除底部边框并删除外部(不必要的)滚动条?
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
position:fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#foo {
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<iframe id="foo" frameborder="0" marginwidth="0" marginheight="0"
src="//www.iana.org/domains/reserved"></iframe>
</div>
</body>
</html>