使用iframe的HTML5文档类型

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

需要使用一个iframe
iframe是一个容器内是固定的位置占用了整个屏幕
html和身体都溢出隐藏
极品HTML5文档类型（删除文档类型或切换到较旧的文档类型将修复滚动条问题）
需要保持溢出-y：auto和-webkit-overflow-scrolling：触摸#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>

来源

2015-11-06 Patrick

请审核并测试我在iPhone上的解决方案。我很好奇它是否成功，但对购买iPhone不是很好奇。：P – zer00ne

我没有打扰测试，因为在桌面浏览器中查看时存在两个滚动条。 – Patrick

更新后的http://plnkr.co/edit/QkF05lhU3dH3qhn7JQ7N?p=preview – zer00ne

的“底边框”是不是一个边界，它是一个内联元素空间（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>

来源

2015-11-06 17:51:14 LGSon

我对这个解决方案感到兴奋......出于某种原因，这也打破了iphone上的滚动：（ – Patrick

它是否也使用'margin-bottom：-4px'来破坏？...检查我的更新 – LGSon

我' m害怕魔术数字4px。是否有任何规范说明那是什么保证金内联元素绕过它？我尝试设置位置：绝对#foo，这似乎在初始测试工作（真的会有首选块虽然） – Patrick

看来，在默认情况下，对于未使用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>

来源

2015-11-06 17:01:18 Tina

这样做可以摆脱桌面上的滚动条，但不允许您在iphone中滚动（例如编辑并在iOS中打开折叠器，打开横向，并看到滚动不起作用） – Patrick

我修改了与移动Safari一起使用的答案，并在我的iPhone 6上对其进行了测试。它似乎按照您的预期工作。 – Tina

Chrome在桌面（和其他桌面浏览器）有双滚动条，由于溢出 - Y：自动...没有什么不同，在您更新的答案比我原来的职位...为了澄清，我的文章目前在iPhone上工作 - - 希望在桌面浏览器上运行而不会打破手机上的滚动。 – Patrick

貌似我来晚了党......我的解决方案是任何移动设备上未经检验。所有更改都在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; 
    } 
}

来源

2015-11-06 18:54:28 zer00ne

使用iframe的HTML5文档类型

回答

相关问题