带有 iframe 的 HTML5 文档类型答案

【问题标题】：HTML5 Doctype with iframe带有 iframe 的 HTML5 文档类型
【发布时间】：2016-02-07 21:22:45
【问题描述】：

当在 HTML5 文档类型中包含完整的高度/宽度 iframe 时，底部添加了一个我似乎无法删除的边框。这会在页面中添加一个滚动条来说明边框。不幸的是，我受到以下限制：

需要使用 iframe
iframe 位于占据整个屏幕的固定位置的容器内
html 和 body 已隐藏溢出
需要 HTML5 doctype（删除 doctype 或切换到较旧的 doctype 将解决滚动条问题）
需要保持 overflow-y: auto 和 -webkit-overflow-scrolling: touch on the #container 因为 iOS 不会滚动框架，否则（或似乎无法使其滚动）。

我有一个 plunker 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>

【问题讨论】：

请在 iPhone 上查看并测试我的解决方案。我很好奇它是否成功，但对购买 iPhone 并不那么好奇。 :P
我没有费心测试，因为在桌面浏览器中查看时出现了两个滚动条。
更新plnkr.co/edit/QkF05lhU3dH3qhn7JQ7N?p=preview

标签： css html iframe

【解决方案1】：

默认情况下，对于不使用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>

【讨论】：

这确实摆脱了桌面上的滚动条，但不允许您在 iphone 中滚动（在 iOS 中编辑并打开 plunker，转为横向，然后查看滚动不起作用）跨度>
我已经修改了答案以使用 Mobile Safari 并在我的 iPhone 6 上对其进行了测试。它似乎按您的预期工作。
Chrome 桌面（和其他桌面浏览器）有双滚动条，因为 overflow-y: auto...您更新的答案与我原来的帖子没有什么不同...澄清一下，我的帖子目前在 iphone 上运行——希望在不中断手机滚动的情况下让它在桌面浏览器上运行。
我已修改我的答案以提供解决方案。也许它不是最优雅的，因为它使用 JavaScript，但它似乎可以工作。
通过投票来奖励您的时间 -- 寻找纯 CSS 的解决方案，我认为我们与 LGSon 关系密切。

【解决方案2】：

“下边框”不是边框，它是内联元素空间（iframe 是内联元素），所以解决方法是去掉那个“空间”。

“foo”有 3 种方式：

display: 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>

【讨论】：

我对这个解决方案感到很兴奋......出于某种原因，这也会破坏 iphone 上的滚动 :(
使用margin-bottom: -4px 也会中断吗？ ...检查我的更新。
我害怕神奇的数字 4px。任何规范中是否有说明这就是内联边距元素的内容？我确实尝试在 #foo 上设置 position: absolute ，这似乎在初始测试中有效（虽然确实有首选块）。
负边距是众所周知的修复内联元素之间的空间，这也是造成这种情况的原因。你可以在这里阅读更多关于“空间问题”的信息：css-tricks.com/fighting-the-space-between-inline-block-elements
让我知道它是如何与 iPhone 配合使用的（什么效果最好以及您选择了什么），我将其作为注释添加到我的答案中。

【解决方案3】：

看来我来晚了...我的解决方案在任何移动设备上都未经测试。所有更改都在 CSS (style.css) 上进行了注释，并且标记只有一处修改：scrolling="no" 到 iframe#foo。

PLUNKER

HTML

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

【讨论】：