Question

好的，所以我需要能够有一个页面填充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/

发布于： Setting iframe to take remaining space in page

Answer 1

使用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％高度，则应该占用页面上的剩余空间。

注意：如果用户调整页面大小，则必须重新计算高度

Answer 2

您似乎没有图像，但是不应再使用三个图像（并且不应再使用中心标记）。

你必须等到图像被加载，它们将在window.onload上，然后获得图像的总高度，但是当它们浮动时，这也不准确，那么是什么你真正需要做的就是让CSS正确。

这不是应该浮动的图像，因为它们不是真正的兄弟姐妹，而是锚点，似乎所有的锚点都在DIV中，因此将DIV作为正确的移动目标。

棘手的部分是让DIV与它可能包含的任何和所有图像的大小相同，并且常见的技巧是将其浮动，因为这将使其自动调整正确，但如果您有其他内容（你不这样做）你需要清除漂浮物。

知道了这一切，我们可以为DIV添加一个ID，这样就更容易定位：

<iframe frameborder="0" src="http://jsfiddle.net/"></iframe>
<div id="container"> 
    <a href="index.html">
        <img src="http://cdn.arstechnica.net/wp-content/uploads/2013/05/CC-image.jpeg" />
    </a>
    <a href="page2.html">
        <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSDIjq8HKf234I87kaL1SPTOyop7_GGSzAEG5GR5-Atuo1T7nIQ" />
    </a>
    <a href="page3.html">
        <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRhpRmIys5SOHo3jSoyibVFBgZtcXVRmQHwv3Uc-uC7-nUKLYGc" />
    </a>
</div>

相应地更改CSS

#container {
    position: relative; 
    width: 100%;
    float: left;
}
a {
    position: relative;
    width:33.3333%;
    float:left;
    height: auto;
}
img {
    border:0px;
    padding:0px;
    width: 100%;
    height: auto;
}
body {
    height:100%;
    width:100%;
    margin:0px;
}
iframe {
    overflow-y: scroll;
    overflow-x: hidden;
    border:0px;
    padding:0px;
    width:100%;
    height:auto;
}

然后我们要做的就是获取窗口的高度并减去DIV的高度，但如上所述，我们必须等到所有图像都被加载。
为了在每次更改窗口大小时使其工作，我们可以将其附加到resize事件，然后在页面加载时触发该事件：

$(window).on('load', function() {
    $(this).on('resize', function () {
        var imageHeight = $('#container')[0].clientHeight,
            windowHeight = $(this).height();

        $('iframe').height(windowHeight - imageHeight);
    }).trigger('resize');
});

FIDDLE

Answer 3

假设您知道图像的实际尺寸并假设它们各自相同，则可以为图像的纵横比设置变量。根据窗口宽度，这允许在加载之前计算图像显示高度

var imageW= 400,/* adjust accordingly*/
    imageH=300
var ratio= imageW/imageH;

在页面加载时使用jQuery（在加载图像之前发生）：

$(function(){
  var footerH= ratio * $(window).width() /3 ;
  $('iframe').height( $(window).height() - footerH);

})

如何设置iframe以自动填充HTML中的空体空间

3 个答案: