我想设计一个带有横幅和iframe的网页.我希望iframe可以填充所有剩余的页面高度,并在浏览器调整大小时自动调整大小.是否有可能在没有编写Javascript代码的情况下完成它,只有CSS？
我尝试设置height:100%iframe,结果非常接近,但iframe试图填充整个页面高度,包括30px横幅div元素的高度,所以我得到了不必要的垂直滚动条.这不完美.
更新说明:请原谅我没有好好描述这个问题,我在DIV上尝试了CSS margin,padding属性来成功占据网页的整个提醒高度,但这个技巧对iframe没有用.
Banner
任何想法都表示赞赏.
诀窍是要了解100%的含义.阅读CSS规范可以帮助你.
长话短说 - 有一个"包含块"的东西 - 这不是父元素.简单地说,它是层次结构中具有位置的第一个元素:relative或position:absolute.或者身体元素本身,如果没有别的.因此,当您说"width:100%"时,它会检查"包含块"的宽度,并将元素的宽度设置为相同的大小.如果那里还有其他东西,那么你可能会得到一个比自身大的"包含块"的内容(因此"溢出").
高度以相同的方式工作.有一个例外.您无法获得100%的浏览器窗口高度.可以计算100%的最高级别元素是body(或html？不确定)元素,并且该元素足以包含其内容.指定高度:100%对它没有影响,因为它没有"父元素"来衡量100%.窗口本身不算数.;)
要使某些东西完全伸展到窗口的100%,您有两种选择:
使用JavaScript
不要使用DOCTYPE.这不是一个好习惯,但是它将浏览器置于"怪癖模式",你可以在元素上执行height ="100%",它会将它们拉伸到窗口大小.请注意,您的页面的其余部分可能也必须更改以适应DOCTYPE更改.
更新:当我发布这个时,我不确定我是不是已经错了,但这肯定已经过时了.今天你可以在样式表中执行此操作:html, body { height: 100% }它实际上会延伸到整个视口.即使使用DOCTYPE.min-height: 100%也可能有用,具体取决于你的情况.
而且我也不建议任何人制作一个怪癖模式文档,因为它会导致比解决它们更令人头疼的问题.每个浏览器都有不同的怪癖模式,因此让您的页面在浏览器中保持一致性变得更加困难两个数量级.使用DOCTYPE.总是.最好是HTML5一个 - .它很容易记住并且在所有浏览器中都像魅力一样,甚至是10年前的浏览器.
唯一的例外是当你必须支持像IE5之类的东西时.如果你在那里,那么无论如何你都是自己的.那些古老的浏览器与今天的浏览器完全不同,这里给出的一些建议对你有帮助.从好的方面来说,如果你在那里,你可能只需要支持一种浏览器,它可以解决兼容性问题.
祝好运!
更新2:嘿,已经很久了!6年后,新的选择在现场.我刚刚在下面的评论中进行了讨论,这里有更多技巧可以在今天的浏览器中使用.
选项1 - 绝对定位.当您知道第一部分的精确高度时,很好并且干净.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
Some text
And some more text
我们使用JavaScript来解决这个问题; 这是源头.
var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');
function pageY(elem) {
return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
function resizeIframe() {
var height = document.documentElement.clientHeight;
height -= pageY(document.getElementById('ifm'))+ buffer ;
height = (height < 0) ? 0 : height;
document.getElementById('ifm').style.height = height + 'px';
}
// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
iframe.attachEvent("onload", resizeIframe);
} else {
iframe.onload=resizeIframe;
}
window.onresize = resizeIframe;
注意:ifm是iframe ID
pageY() 由John Resig(jQuery的作者)创建
另一种方法是使用position: fixed;on父节点.
如果我没有弄错,position: fixed;请将元素绑定到视口,因此,一旦您提供此节点width: 100%;和height: 100%;属性,它将跨越整个屏幕.从这一点开始,您可以将