使用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文檔類型

回答

相關問題