html - 获取 Iframe 以填充到页面底部

Question

这似乎应该是一个简单的问题，但我似乎无法在任何地方找到解决方案。

在我正在制作的网站上，我在页面顶部有一个高度为 43 像素的导航栏，为了不必为我制作的每个单独页面编辑它，我所做的是在下面放置一个 iframe它的宽度为 100%，导航按钮指向我的 iframe 源。

现在我遇到的问题是我希望 iframe 从导航栏的底部延伸到页面的底部，这样你就看不出它是 iframed 的，但是如果我将高度设置为 100%它设置为整个页面的高度并添加第二个滚动条以补偿底部额外的 43px，那么我如何才能将 iframe 调整到导航栏下方的剩余空间？

我试过设置不同的百分比，但这对不同的分辨率监视器不起作用。我需要它来跨浏览器工作(在 IE、Chrome、Safari 和 Mozilla 中，最好也在 Opera 中，但这不是必需的)。

抱歉有点啰嗦，有人可以帮忙吗？

Answer 1

很简单。您需要做的就是从当前视口(viewport)高度中减去导航的高度并将其设置为 iframe 的高度。使用此 Javascript 方法:

function ResizeIFrame() {
    var nNavigationHeight = 43; // Assuming the 43px you stated above
    var nViewHeight = document.body.clientHeight;
    var nIframeHeight = nViewHeight - nNavigationHeight;
    document.getElementById("YourIFrameID").style.height = nIframeHeight + "px";
}

您需要将 body 和 html 设置为 100% 高度才能正常工作。

body, html {
    height: 100%;
}

我应该提一下，这是实现您想要做的事情的一种有点可疑的方式，但它确实是您问题的解决方案。我建议你考虑使用 Jquery 而不是 vanilla Javascript，因为跨浏览器的麻烦会被最小化(我已经在我当前安装的 IE 7 & 8、FF、Chrome 和 Safari 中测试了这段代码，没有问题，但是你的里程数可能会有所不同)。如果您决定走那条路，最好利用它们出色而简单的 AJAX 功能，使用 div 并完全放弃 iframe。