小编典典

如果内容溢出,有一个需要滚动的固定位置 div

all

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

我在菜单的滚动左侧有一个固定位置的 div。右侧是可以正确滚动的标准 div。问题是,当浏览器视口太小而无法看到整个菜单时..
没有办法让它滚动我能找到的(至少不是用 css)。我尝试在 css 中使用不同的溢出,但没有任何东西可以使 div 滚动。包含菜单的 div 设置为
min-height:100% 和 position:fixed.. 这两个属性我都需要保留。

包含 菜单 的 div位于另一个绝对定位且高度设置为 100% 的包装器 div 内。

如果内容对于 div 来说太高,我怎样才能让它垂直滚动?

这导致我遇到另一个问题,我不希望显示滚动条..但我想我可能已经有了答案(只是它还不起作用,因为我无法让 div 滚动开始)。

有什么解决办法吗?也许需要javascript?(我对此知之甚少)

JS 小提琴示例

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

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

还尝试添加 height:100% 只是为了看看这是否是一个问题,但它也没有工作......固定高度也没有,比如 600px。


阅读 125

收藏
2022-07-02

共1个答案

小编典典

使用的问题height:100%是它将是 100% 的页面而不是 100%
的窗口(正如您可能期望的那样)。这将导致您看到的问题,因为非固定内容足够长,可以包含 100%
高度的固定内容,而无需滚动条。浏览器不知道/关心您实际上不能向下滚动该栏以查看它

你可以用它fixed来完成你想做的事情。

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

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

2022-07-02