仅当固定元素的内容超过视口的高度时，才能使它的内容滚动? [英] How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

问题描述

我在网页左侧的fixed中有一个div，其中包含菜单和导航链接.它没有从CSS设置高度，内容由高度决定，宽度固定.问题是，如果内容太多，div将大于窗口的高度，而部分内容将不可见. (滚动窗口无济于事，因为位置为fixed且div不会滚动.)

I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the div will be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixed and the div won't scroll.)

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

I tried to set overflow-y:auto; but that doesn't help either, the div doesn't seem to notice that part of it is outside of the window.

如果div挂在窗外，如何在需要时使其内容仅可滚动?

How can I make it's contents scrollable only, if needed, if the div hangs out of the window?

推荐答案

您可能不会.这很接近.如果下方有空间，您将不会得到周围流动的内容.

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

http://jsfiddle.net/ThnLk/1289

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

您还可以设置百分比高度:

You can do a percentage height as well:

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

.stuck {
    max-height: 100%;
}

这篇关于仅当固定元素的内容超过视口的高度时，才能使它的内容滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！