gpt4 book ai didi

css - 带有 iframe 的 HTML5 Doctype

转载 作者:搜寻专家 更新时间:2023-10-31 22:59:40 25 4
gpt4 key购买 nike

当在 HTML5 文档类型中包含全高/全宽 iframe 时,底部会添加一个边框,我似乎无法将其移除。这会向页面添加一个滚动条以说明边框。不幸的是,我受到以下限制:

  • 需要使用 iframe
  • iframe 位于占据整个屏幕的固定位置的容器中
  • html 和 body 隐藏了溢出
  • 需要 HTML5 文档类型(删除文档类型或切换到较旧的文档类型将解决滚动条问题)
  • 需要保持 overflow-y: auto 和 -webkit-overflow-scrolling: touch #container 否则 iOS 不会滚动框架(或者似乎无法使其滚动)。

我有一个笨蛋 here显示相同。从中删除 html5 文档类型表明它可以解决问题(但这不是可行的解决方案)。

是否有任何 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>

最佳答案

“底部边框”不是边框,它是一个内联元素空间(iframe 是一个内联元素),所以解决方法是去掉那个“空间”。

以下是“foo”的 3 种方式:

  • 显示: block
  • position:absolute位置
  • margin-bottom: -4px;

注意:display:block 在某些情况下在 iOS 上似乎无法正常工作。

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 {
display: block;
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>

关于css - 带有 iframe 的 HTML5 Doctype,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33571717/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com