如何将iframe设置为自动填充HTML中的空白正文空间
如何将iframe设置为自动填充HTML中的空白正文空间
提问于 2013-11-25 07:34:56
好的，所以我需要能够有一个页面，充满了100%的屏幕，没有溢出。我在页面的顶部有一个iframe，在底部有一个img。
我需要能够让iframe自动设置它的高度，以填充文档中所有剩余的空间。
下面是一些代码：
<!DOCTYPE HTML>
<head>
<style type="text/css">
img {
border:0px;
padding:0px;
float:left;
width:33.3333%;
}
body {
height:100%;
width:100%;
margin:0px;
}
iframe {
overflow-y: scroll;
overflow-x: hidden;
border:0px;
padding:0px;
width:100%;
height:auto;
}
</style>
</head>
<body>
<!-- INNER CONTENT -->
<iframe frameborder="0" src="..." ></iframe>
<!-- BOTTOM BUTTONS -->
<center>
<div>
<a href="index.html">
<img src="img3.png" />
</a>
<a href="page2.html">
<img src="img1.png" />
</a>
<a href="page3.html">
<img src="img2.png" />
</a>
</div>
</center>
</body>我需要一些可以为iframe标签设置的计算。就像这样
<iframe height="'bodyheight-imgheight'"></iframe>无论是CSS，HTML，Js，还是jQ，任何类型的答案都是好的。
编辑我知道我可以简单地设置图像的高度，并为iframe的高度做一个手动设置，但我希望图像的高度随着它们的宽度变化
感谢所有的回复，我用这个答案来解决我的问题：http://jsfiddle.net/AmVhK/6/
Stack Overflow用户
发布于 2013-11-25 07:52:45
使用javascript也没那么糟糕，你只需计算出父元素中所有内容的高度，然后从父元素的高度中减去。因此，如果iframe，$frame是有问题的元素，您可以这样做：
height = $frame.parent().height();//height of parent
$frame.siblings.each(function() {
height -= $(this).height();
});
$frame.height(height); //set frame height to remaining height of parent因此，如果$frames父对象是主体或者高度为100%，那么它应该占据页面上的剩余空间。
注意:如果用户调整页面大小，则必须重新计算高度
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20182532
复制相关文章
相似问题
腾讯云开发者
