我正在尝试设计以前从未做过的事情。具有包含导航的静态页脚的设计,这是一种反向标准。但是,这导致我遇到了问题。页脚是position: fixed;,但我真的不希望任何内容重叠。我添加了margin-bottom,使其与页脚高度相等,以确保我所有内容的滚动恰好足以在页脚上方看到。但是,这似乎使页面看起来只是空白。

我想知道,是否有一种方法可以确定页面的高度并动态调整两列的高度?也许使用jQuery?

HERE只是粗略地展示了我要设计的设计。如果右侧的内容需要滚动,则左侧看起来就没有了。目前,我只关注左侧栏,这是一种根据实际浏览器窗口的高度进行相应调整的方法。

谢谢。

最佳答案

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/

10-08 01:10
查看更多