html - CSS：侧边栏 100% 高度无滚动

Question

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

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

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

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

问候

编辑：您需要使用位置：固定，顶部，底部，左侧，值为 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 方法，因为我的网格布局通常使用固定或绝对螺丝。在下面的示例中，当宽度低于 990 像素时，我的网格会折叠，因此假设您正在响应，您需要更改此设置。

$(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');
    }
});

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

亲切的问候，M