Question

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

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

我尝试添加jQuery代码：

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

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

Answer 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);

具有可扩展div的粘性页眉和页脚

1 个答案: