我正在尝试设计以前从未做过的事情。具有包含导航的静态页脚的设计,这是一种反向标准。但是,这导致我遇到了问题。页脚是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/