如何设置 iframe 以自动填充 HTML 中的空白正文空间答案

【问题标题】：How to set an iframe to automatically fill empty body space in HTML如何设置 iframe 以自动填充 HTML 中的空白正文空间
【发布时间】：2013-12-09 13:22:01
【问题描述】：

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

【问题讨论】：

如果图像尺寸已知，则将有很大帮助，否则在全部加载之前无法设置高度。装满已卸载图像标签的容器的高度将为 0

标签： javascript jquery html css iframe

【解决方案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% 的高度，它应该占用页面上的剩余空间。

注意：如果用户调整页面大小，您将不得不重新计算高度

【讨论】：

【解决方案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

【讨论】：

【解决方案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);

})

【讨论】：