Question

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

在我正在制作的网站上，我在页面顶部有一个高度为43像素的导航栏，并试图不必为每个单独的页面编辑它，我所做的就是在下面放一个iframe它的宽度为100％，导航按钮的目标是我的iframe源码。

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

我尝试过设置不同的％，但这对于不同的res监视器不起作用。我需要这个跨浏览器工作（在IE，Chrome，Safari和Mozilla中，最好也在Opera中，但这不是必需的）。

对不起它有点罗嗦，有人可以帮忙吗？

Answer 1

非常简单。您所需要做的就是从当前视口高度中减去导航的高度，并将其设置为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";
}

你需要将你的身体和html设置为100％高度才能发挥作用。

body, html {
    height: 100%;
}

我应该提一下，这是一种有点可疑的方式来实现你想要做的事情，但这是一个解决你的问题的解决方案。我建议你考虑使用Jquery而不是vanilla Javascript，因为跨浏览器的头痛会被最小化（我已经在IE 7＆amp; 8，FF，Chrome和Safari的当前安装中测试了这段代码而没有问题，但是你的里程可能会有所不同）如果您决定采用这种方式，最好使用div优秀而简单的AJAX功能，并完全省去iframe。

获取Iframe以填充页面底部

1 个答案: