Question

我想知道在这张图片中获得结果的最佳方法是什么 http://dl.dropbox.com/u/24920447/screen_shot.jpg 我有一个侧边栏，其内容通过ajax加载，其高度会有所不同。如果侧边栏加上标题的高度小于视口，我希望侧边栏（黄色框）底部的div位于文档的正常流程中。但是，如果侧边栏的高度加上页眉高度大于视口，我希望将div固定到浏览器的底部，并使内侧边栏内容可滚动。我已经设置了这个小提琴 http://jsfiddle.net/cfed/B5bRt/4/

我认为最简单的方法是使用jquery在类之间交替，但我不知道如何执行它。

关于如何解决这个问题的任何提示都会很有用

Answer 1

页脚重新定位很容易使用类，滚动ul有点棘手。我毫不怀疑这是可能的，但我发现使用javascript一起破解解决方案更容易。所以这样的事情会起作用：

var el = $('#sidebar');
var ul = el.find('ul');

el.removeClass('fixed');
ul.height('auto');

if (el.offset().top + el.height() > $(window).height()) {
    el.addClass('fixed');

    var ul_height = el.find('.default').offset().top - el.offset().top - el.find('.top').height();
    ul.height(ul_height);
}

这是一个有效的jsFiddle：http://jsfiddle.net/B5bRt/6/。它实际上是一个真正的hacky解决方案，但它的工作原理:)）

Answer 2

查看粘性页脚。其中的一些修改应该是您所需要的。我忘记了您需要的确切代码，但我知道在对自己的页脚进行故障排除时看到了这种效果。

根据窗口高度调整div高度

2 个答案: