HTML5 Doctype与iframe
当在HTML5 doctype中包含全高/全宽iframe时，底部添加了一个我似乎无法删除的边框。这会在页面中添加一个滚动条来说明边框。不幸的是，我受到以下限制：
- 需要使用iframe
- i框架位于占据整个屏幕的固定位置的容器内
- html和正文已隐藏溢出
- 需要HTML5 doctype（删除doctype或切换到旧doctype将解决滚动条问题）
- 需要保持overflow-y:auto和-webkit overflow滚动：触按#容器，否则iOS不会滚动帧（或者似乎无法使其滚动）
我这里有一个plunker展示了同样的东西。从中删除html5 doctype可以解决这个问题（但这不是一个可行的解决方案）。
是否有任何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>共有3个答案
看来我来晚了。。。我的解决方案未在任何移动设备上测试。所有更改都在CSS（style.CSS）上进行注释，标记只有一个修改：scrolling=“no”到iframe\foo。
扑克
超文本标记语言
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<iframe id="foo" frameborder="0" scrolling='no' marginwidth="0" marginheight="0"
src="//www.iana.org/domains/reserved"></iframe>
</div>
</body>
</html>
CSS
/* S.O. 33571717 */
/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
/* NOTE: This style is contingent upon the iframe #foo... */
/* having the attribute: scrolling="no" */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
/* If html is 100%... what is html's parent? 100% of nothing? */
/* Having +100% unit higher than max will extend overflow: auto */
/* Using vh and vw units to ensure accurate viewport dimensions... */
/* see http://goo.gl/yQZX8v */
height: calc(100vh + 100%);
/* set as vh instead of % */
width: 100vw;
/* set as vw instead of % */
margin: 0;
padding: 0;
/* split overflow's axis */
overflow-y: auto;
overflow-x: hidden;
}
#container {
/* changed from fixed */
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* split overflow's axis */
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#foo {
height: 100%;
width: 100%;
/* added #foo to 'flow' of #container */
position: absolute;
/* #foo is stretched to every corner of #container */
top: 0;
bottom: 0;
left: 0;
right: 0;
/* split overflow's axis */
overflow-y: auto;
overflow-x: hidden;
}
/* THIS HAS NOT BEEN TESTED ON ANY MOBILE DEVICES */
/* This media query is DEVICE specific to an iPhone 6+ */
/* NOTE: Use media queries for landscape and portrait mode... */
/* the properties are reversed basically */
/* iPhones do not follow a simple logic for media query dimensions... */
/* see http://stephen.io/mediaqueries/ */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape){
html, body {
overflow-y: hidden;
overflow-x: auto;
height: 100vh;
width: calc(100vw + 100%);
}
#container {
overflow-x: auto;
}
#foo {
overflow-y: hidden;
overflow-x: auto;
}
}
默认情况下，对于未使用display:block的元素，似乎有一个额外的边距。
以下仅CSS的解决方案似乎可以在Mobile Safari和Chrome桌面上使用。
.demo-iframe-holder {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
display: block;
height: 100%;
width: 100%;
margin: 0;
border: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="demo-iframe-holder">
<iframe frameborder="0" scrolling="yes" src="//www.iana.org/domains/reserved"></iframe>
</div>
</body>
</html>
“底部边框”不是边框，它是一个内联元素空间（iframe是内联元素），因此解决方法是去掉该“空间”。
以下是"foo"的3种方法：
显示：块位置：绝对页边距底部：-4px
注意：显示：块在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>
-
在C语言中，假设每个算法被赋予完全相同的一组进程，那么先到先得、最短作业优先和循环之间的周转时间是否相等？还是调度算法不同？
-
问题内容： 为了为 HTML5 Doctype 定义字符集，我应该使用哪种表示法？ 短： 长： 问题答案： 在HTML5中，它们是等效的。使用较短的一个，更容易记住和键入。浏览器支持很好，因为它是为向后兼容而设计的。
-
连接的多个输入都相当于Yes的时候才会输出Yes。 用法 Your browser does not support the video tag. 案例：小闹钟 功能：今天15：10：00，响起猫叫声小闹钟 工作原理 当所有的输入都是Yes的时候，与节点才输出Yes。
-
问题内容： 似乎有三种 相同的 方法可以独立于平台获取依赖于平台的“文件分隔符”： 我们如何决定何时使用哪个？ 它们之间甚至有什么区别吗？ 问题答案： 可以通过调用命令行参数或使用命令行参数覆盖 获取默认文件系统的分隔符。 获取默认文件系统。 获取文件系统的分隔符。请注意，作为一种实例方法，在需要代码在一个JVM中对多个文件系统进行操作的情况下，可以使用该方法将不同的文件系统传递给代码（而不是默认
-
lxml requests
-
问题内容： 我今天刚刚与一些同事讨论了python的db-api fetchone vs fetchmany vs fetchall。 我确定每个应用程序的用例都取决于我正在使用的db-api的实现，但是总的来说，fetchone，fetchmany，fetchall的用例是什么？ 换句话说，以下等效项是什么？还是其中之一比其他人更受青睐？如果是这样，在哪些情况下？ 问题答案： 我认为这确实取决于