粘性页眉和页脚与可缩放的div

我试图实现一个固定的页眉和页脚与内部主要内容滚动页眉和页脚下，并修复正确的导航。粘性页眉和页脚与可缩放的div

我能得到尽可能接近这个唯一的办法就是这个http://jsfiddle.net/sjUBQ/尝试，但我有固定的高度为300像素的#main .yui3-U-3-5 {背景：#aaa;高度：300像素; overflow：auto;}以获得滚动条。

我尝试添加jQuery代码：

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

但这并没有工作，所以我如何得到一个棘手的页眉和页脚与内部的div显示滚动条，如果含量较高，那么实际的浏览器窗口？

来源

2012-05-03 khinester

您是否尝试过在网上搜索 “粘头HTML” ？ – Blazemonger

这不是问题！我有粘性页眉和页脚工作，我很想知道如何修复内部div的高度，并显示滚动条，如果内容较大，而不必为此div设置高度，因为用户具有不同的屏幕尺寸 – khinester

这是你要去的吗？ 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-03 20:00:47

嗨感谢您的回复，我试图弄清楚如何把内部div的滚动条！我想让页眉，页脚和右栏始终显示，并且只在内部主内容div上具有滚动条。 – khinester

啊，好的。我在这里更新它：http://jsfiddle.net/RiderSargent/sjUBQ/5/ 签出jQuery代码来计算main的高度。如果你调整它的大小，那么运行jsfiddle，它应该做你想做的，我想。我已经将计算出的高度输出到头文件中进行调试。你应该能够毫无困难地移除'$（'。pad1'）.text（mainHeight）;'行。 –

谢谢你，我正在寻找什么。 – khinester

粘性页眉和页脚与可缩放的div

回答

相关问题