javascript - 如何根据浏览器大小调整我的 div 的高度

Question

我正在尝试设计一些我以前从未做过的东西。带有包含导航的静态页脚的设计，有点像反向标准。但是，这使我遇到了一个问题。页脚是 position: fixed; 但我真的不希望任何内容重叠。我添加了一个 margin-bottom 与页脚等高，这确保我的所有内容滚动到足以在页脚上方看到。然而，这似乎使页面看起来很奇怪。

我想知道，有没有办法确定页面的高度并动态调整两列的高度？也许使用 jquery？

HERE是粗略展示我想要的设计的 fiddle 。如果右侧的内容需要滚动，那么左侧的内容就会消失。目前，我只关注左侧栏，这是一种根据实际浏览器窗口的高度进行相应调整的方法。

谢谢。

Answer 1

有一个JQuery的解决方案

function resizeViewport() {
  //calculate the available space for the columns
  var height = window.innerHeight - $(".footer").innerHeight();
  //set the height to the columns wrapper
  $(".frontpage").height(height + "px");
}

$(function() {
  //regiter onresize function
  $(window).resize(resizeViewport); //register onresize function
  resizeViewport(); //resize at the first time
});

并添加此样式以不关心溢出和主体边距

body { margin: 0 }

.frontpage { overflow: hidden; }

有例子http://jsfiddle.net/zbqf3c3L/