html - 如何使固定元素的内容仅在超过视口(viewport)高度时才可滚动？

Question

我有一个 div 位于网页的左侧 fixed ，包含菜单和导航链接。它没有从 css 设置高度，内容决定高度，宽度是固定的。问题是如果内容太多，div 会比窗口的高度大，部分内容会不可见。 (滚动窗口没有帮助，因为位置是 fixed 并且 div 不会滚动。)

我尝试设置 overflow-y:auto; 但这也无济于事，div 似乎没有注意到它的一部分在窗口之外。

如果 div 卡在窗口外，我怎样才能让它的内容只在需要时滚动？

Answer 1

你可能做不到。这是接近的东西。如果下方有空间，您将无法让内容围绕它流动。

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

你也可以做一个百分比高度:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}