Question

在HTML5 doctype中包含完整的高度/宽度iframe时，底部会添加一个边框，我似乎无法将其删除。这会向页面添加滚动条以考虑边框。不幸的是，我受到以下限制：

需要使用iframe
iframe位于占据整个屏幕的固定位置的容器内
html和body隐藏溢出
需要HTML5 doctype（删除doctype或切换到较旧的doctype会修复滚动条问题）
需要保持溢出-y：auto和-webkit-overflow-scrolling：触摸#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>

Answer 1

“底部边框”不是边框，它是内联元素空间（iframe是内联元素），因此解决方法是摆脱“空间”。

以下是“foo”的三种方式：

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>

Answer 2

看起来我来晚了...我的解决方案在任何移动设备上未经测试。所有更改都在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;
  }
}

带iframe的HTML5 Doctype

2 个答案: