如何使固定元素的内容仅在超出视口高度时才可滚动？

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%;
}

Answer 2

下面的链接将演示我是如何完成此任务的.不是很难 - 只需要使用一些聪明的前端开发!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Answer 3

在您的位置上试试这个：固定元素。

overflow-y: scroll;
max-height: 100%;

Answer 4

你可能需要一个内部div.用css是:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}