Question

我想要一个侧边栏，它占据了屏幕的整个高度，并且在向下滚动时不会改变。

因此，当我仅滚动内容更改但导航栏始终保持不变时。

我做了第一个例子：http://jsfiddle.net/CwSD6/

但是缺少非滚动功能......

此致

编辑：你需要使用position：fixed，top，bottom，left，值为0。 http://jsfiddle.net/CwSD6/1/

Answer 1

可以通过position: fixed;

中的<aside>来完成

看到这个小提琴jsfiddle

Answer 2

试试这个：

aside
{
    position: fixed;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid #111;
}

希望这有帮助

Answer 3

我使用jQuery方法使用固定或绝对的螺丝与我的网格布局。在下面的示例中，我的网格在990px宽度下折叠，因此您需要在假设您正在响应时更改此设置。

$(window).resize(function() {
    var doc_height = $(document).height();
    var doc_width = $(document).width()
    if (doc_width > 990) {
        $('#sidebar').css("height", doc_height);
    } else {
        $('#sidebar').css("height", 'auto');
    }
});

虽然这可能不是最有效的方法，但您不需要设置变量。我发现它有助于提高可读性。

亲切的问候，中号

CSS：边栏100％高度无滚动

3 个答案: