有一个固定的位置div，如果内容溢出需要滚动 [英] Have a fixed position div that needs to scroll if content overflows

问题描述

我实际上有两个问题，但首先解决主要问题，因为我相信另一个更容易解决。

I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address.

我在左边有一个固定位置div侧面的滚动菜单。右侧是一个标准div，正确滚动。问题是，当浏览器的视口太小，看不到整个菜单..有没有办法让它滚动，我可以找到（至少不与css）。我试着在css中使用不同的溢出，但没有什么使div滚动。包含菜单的div设置为min-height：100％和position：fixed ..这两个属性我需要保留。

I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is that when the browser view-port is too small to see the entire menu.. there is no way to get it to scroll that I can find (at least not with css). I've tried using different overflows in css, but nothing makes the div scroll. The div that contains the menu is set to min-height:100% and position:fixed.. both attributes I need to keep.

包含菜单的div位于另一个封装div中，绝对定位，高度设置为100％。

The div containing the menu is inside another wrapper div that is positioned absolutely and height set to 100%.

如果内容对于div太高，如何让它垂直滚动？

How can I get it to scroll vertically if the content is too tall for the div?

这导致我的另一个问题，我不想要一个滚动条显示..但我想我可能已经有一个答案（只有它不工作，因为我不能得到的div滚动开始）。

That leads me to the other issue, that i don't want a scroll bar to display.. but I think I may already have an answer to that (only it doesn't work yet because I can't get the div to scroll to begin with).

任何解决方案？也许需要javascript？ （其中我不知道）

Any solutions? Perhaps javascript is needed? (of which i know little about)

JS Fiddle Example

和导致问题的相关代码（因为在此处发布整个事件太长了）：

and the relevant code that is causing the issue (since posting the whole thing in here is waaay too long):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

也尝试添加height：100％

Also tried adding height:100% as well just to see if that was an issue but it didn't work either... nor did a fixed height, such as 600px.

推荐答案

我知道这是一个固定的高度，一个老问题，但我只是想我会把这个答案在那里。

I know this is an old question, but I just thought I'd throw this answer out there.

使用height：100％的问题是，它将是页面的100％而不是100％的窗口（正如你可能期望的那样）。这将导致您看到的问题，因为非固定内容足够长，包括固定内容的100％高度，而不需要滚动条。浏览器不知道/关心你实际上不能滚动该栏下来查看它

The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you're seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll bar. The browser doesn't know/care that you can't actually scroll that bar down to see it

但是，因为fixed有它的属性，你可以做而是完成你想要做的事情：

However, because fixed has the properties that it does, you can do this instead, and accomplish what you're trying to do:

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

这里是一个你的jsfiddle的叉子来显示我的修复工作：
http://jsfiddle.net/strider820/84AsW/1/

Here's a fork of your jsfiddle to show my fix working: http://jsfiddle.net/strider820/84AsW/1/

这篇关于有一个固定的位置div，如果内容溢出需要滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！