帶iframe的HTML5 Doctype
[英]HTML5 Doctype with iframe
問題描述
在HTML5 doctype中包含完整高度/寬度iframe時，底部會添加一個邊框，我似乎無法刪除。 這會向頁面添加滾動條以考慮邊框。 不幸的是，我受到以下限制：
- 需要使用iframe
- iframe位於占據整個屏幕的固定位置的容器內
- html和body有溢出隱藏
- 需要HTML5 doctype（刪除doctype或切換到較舊的doctype會修復滾動條問題）
- 需要保持溢出-y：auto和-webkit-overflow-scrolling：觸摸#container，因為iOS不會滾動框架（否則似乎無法滾動）。
我這里有一個同樣的東西。 從中刪除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>
3 個解決方案
解決方案1
3 已采納 2015-11-06 17:51:14
“底部邊框”不是邊框，它是內聯元素空間（iframe是內聯元素），因此修復是擺脫那個“空間”。
以下是“foo”的3種方式：
-
display: block -
position: absolute -
margin-bottom: -4px;
注意：在iOS上的某些情況下， display: block似乎無法正常工作。
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>
解決方案2
2 2015-11-06 17:01:18
默認情況下，對於不使用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>
解決方案3
0 2015-11-06 18:54:28
看起來我來晚了...我的解決方案在任何移動設備上都未經過測試 。 所有更改都在CSS（ style.css ）上注釋，並且對標記只有一個修改：對iframe#foo scrolling="no" 。
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;
}
}
<!doctype …/>用於HTML5
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.