我的HTML文档中有一个iframe,我遇到了一些麻烦.
我还在页面顶部有一个URL栏(固定位置元素),当它们滚动时应该与用户保持一致.这很好.我希望iframe填充剩余的空间,但不会被URL栏覆盖.
这就是我所说的.http://s75582.gridserver.com/Ls
如何修复此问题,以便URL栏不会覆盖页面的一部分？当我尝试在体内设置填充时,它只会创建一个额外的,恼人的滚动条.
bob*_*nce 37
虽然你不能说CSS中的'高度:100%减去一些像素',你可以让iframe 100%高,然后使用填充将其自上而下.然后,您可以利用CSS3 box-sizing属性来从高度中减去填充.
这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>
适用于IE8,Moz,Op,Saf,Chrome.你必须继续使用JavaScript回退来为不支持box-sizing的浏览器(特别是IE最多7个)使额外的滚动条消失.
它可以在没有任何Javascript的情况下完成,适用于IE7
CSS:
body {
overflow-y: hidden;
}
#imagepgframe {
width: 100%;
height: 100%;
position: absolute;
}
#wrap {
width: 100%;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
}
HTML:
<div id="wrap">
<iframe id="imagepgframe" frameBorder="0" src="http://en.wikipedia.org/wiki/Internet_Explorer_7"></iframe>
</div>
| 归档时间： |
|
| 查看次数： |
65672 次 |
| 最近记录： |