tes*_*dtv 227 html javascript css iframe html-frames
所有浏览器都支持iframe height = 100%吗？
我使用doctype作为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的iframe代码中,如果我说:
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它实际上会占用剩余页面的高度(因为顶部有另一个框架,固定高度为50px)所有主流浏览器(IE/Firefox/Safari)都支持这种格式吗？
关于滚动条,即使我说scrolling="no",我可以在Firefox中看到禁用的滚动条...如何完全隐藏滚动条并自动设置iframe高度？
Axe*_*Axe 261
你可以使用frameset作为前面的答案状态,但是如果你坚持使用iFrames,下面的两个例子应该可以工作:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
替代:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
要隐藏滚动,请使用上面显示的2个替代方法:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
Hack第二个例子:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
要隐藏iFrame的滚动条,父级overflow: hidden将隐藏滚动条,并使iFrame的宽度和高度达到150%,这会强制页面外的滚动条,因为主体没有滚动条我们可能不希望iframe超出页面的界限.这会全屏隐藏iFrame的滚动条!
Jos*_*ier 160
iframe:在支持的浏览器中,您可以使用视口百分比长度,例如height: 100vh.
Where 100vh表示视口的高度,同样100vw表示宽度.
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>这种方法非常简单.只需设置的定位fixed元素,并添加height/ width的100%.
iframe {
position: fixed;
background: #000;
border: none;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
}<iframe></iframe>对于这最后的方法,只设置height了的body/ html/ iframe元素100%.
html, body {
height: 100%;
margin: 0; /* Reset default margin on the body element */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
width: 100%;
height: 100%;
}<iframe></iframe>Rud*_*die 44
1.将您的DOCTYPE更改为不太严格的内容.不要使用XHTML; 这太傻了.只需使用HTML 5 doctype就可以了:
<!doctype html>
2.您可能需要确保(取决于浏览器)iframe的父级具有高度.而它的父母.而它的父母.等等:
html, body { height: 100%; }
Not*_*Jay 32
我遇到了同样的问题,我把一个iframe拉成了一个div.试试这个:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为100vh,代表视口高度.此外,宽度可以设置为100vw,但如果源文件响应(您的帧将变得非常宽),您可能会遇到问题.
Iva*_*van 27
这对我来说效果非常好(仅当iframe内容来自同一个域时):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
小智 6
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}<iframe></iframe>
<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>
要获得 iframe 内没有滚动条的全屏 iframe，请使用以下 css。不需要更多
iframe{
height: 100vh;
width: 100vw
}
iframe::-webkit-scrollbar {
display: none;
}
小智 5
以下测试工作
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">
</iframe>
| 归档时间： |
|
| 查看次数： |
695383 次 |
| 最近记录： |