有一个固定位置的 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.

包含 menu 的 div 位于另一个绝对定位且高度设置为 100% 的包装 div 内.

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 小提琴示例

以及导致问题的相关代码(因为在这里发布整个内容太长了):

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% 只是为了看看这是否是一个问题，但它也不起作用......固定高度也不起作用，例如 600px.

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.

推荐答案

使用 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 来完成您想要做的事情.

You can use fixed to accomplish what you're trying to do.

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

你的这个叉子显示了我的修复:http://jsfiddle.net/strider820/84AsW/1/

This fork of your fiddle shows my fix: http://jsfiddle.net/strider820/84AsW/1/

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