0

我正在尝试使用内部主要内容实现固定的页眉和页脚，以在页眉和页脚下滚动并修复正确的导航。

http://jsfiddle.net/sjUBQ/

我可以接近这一点的唯一方法是这个http://jsfiddle.net/sjUBQ/尝试，但我必须将高度固定为 300px #main .yui3-u-3-5{background:#aaa;height ：300像素；overflow:auto;} 以获取滚动条。

我尝试添加 jQuery 代码：

$(document).ready(function() {
  var desiredHeight = $("body").height() - $("head").height() - $("footer").height();
  $(".yui3-u-3-5").css("min-height", desiredHeight );
});​

但这不起作用，所以如果内容高于实际浏览器窗口，我如何获得一个带有内部 div 的粘性页眉和页脚显示滚动条？

4

1 回答 1

1

这是你想要的吗？http://jsfiddle.net/RiderSargent/sjUBQ/4/

尝试更改右下窗格的高度，看看它是否符合您的要求。我认为关键（如果我理解您要正确执行的操作）是position: fixed;用于您的页眉和页脚。您可能还希望将主 div 的顶部和底部边距设置为分别为页眉和页脚的高度设置的相同尺寸。

编辑：我将“BEGIN”和“END”放在 lorum ipsum 中以确保所有内容都显示出来。

编辑#2：更新 jsFiddle：http: //jsfiddle.net/RiderSargent/sjUBQ/5/

编辑#3：简而言之，我认为这是您需要的 jQuery：

var headerHeight = $('#head').height(),
    footerOffset = $('#footer').offset().top,
    desiredHeight = footerOffset - headerHeight;

$('.yui3-u-3-5').css('height', desiredHeight);
于 2012-05-03T20:00:47.823 回答