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

Question

请参阅此网页。

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.. */
    }
}