使元素固定位置，但如果内容太大则按页面滚动

Question

请参阅this webpage。

1. 首先尝试滚动它，看左边栏是否固定。
2. 调整窗口的高度，以便不会显示左侧栏的所有内容。现在滚动。这一次，左栏不固定。

在此页面中，有一个jquery计算左栏的高度，将其与窗口高度进行比较，然后使左栏位置固定或绝对。

然而，我想知道是否可以通过HTML和CSS实现类似的东西，而不是使用jQuery或类似的东西。

有什么建议吗？ 简而言之，我正在寻找的是一个内容保持固定的栏，但如果内容溢出则滚动。但滚动应该与整个页面一起。

Answer 1

您可以使用媒体查询来指定特定屏幕尺寸的CSS（以及其他内容），以便在屏幕太小时使用一个样式表。我不是专家，所以没有例子，但请看一下http://css-tricks.com/css-media-queries/。抱歉!但你猜你想通了：）

编辑：工作结果如下：

#leftnav {
    /* default look */
    width: 300px;
    position: fixed;
    top:0;
    height: 100%;
}

/* set the size at which the content is clipped and we cannot have fixed position */
@media all and (max-height: 500px) {
    /* things inside here will only have an effect if the browser window shows
       less than 500 px in the height, so here I apply the special rules */
    #leftnav {
        position: absolute;
        height: auto;
        /* etc.. */
    }
}