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

Posted 2023-03-05

技术标签:

【中文标题】如果内容溢出，有一个需要滚动的固定位置 div【英文标题】：Have a fixed position div that needs to scroll if content overflows 【发布时间】：2013-04-12 06:23:31 【问题描述】：

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

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

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

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

这将我引向另一个问题，即我不希望显示滚动条。但我想我可能已经有了答案（只是它还不起作用，因为我无法获得div 开始滚动）。

有什么解决办法吗？也许需要javascript？（我对此知之甚少）

JS Fiddle Example

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

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

还尝试添加 height:100% 以查看这是否是一个问题，但它也没有工作......固定高度也没有，例如 600px。

【问题讨论】：

请用您当前使用的 html 和 css 发布一个 jsfiddle，以便我们查看问题。谢谢！你试过overflow: auto; ? 是 overflow:auto 或 overflow-y:scroll 或 overflow:scroll 都不允许固定的 div 滚动。需要滚动的原因是 div 在其定义的长度内有太多的内容。如果浏览器视口缩小，无论如何都不会导致 div 强制滚动操作。无法发布 JSfiddle 和 html/css，因为它太长了，而且他们不允许您在没有代码的情况下发布 JSfiddle 链接。 :( 我只发布了一段似乎对 div 滚动没有帮助的代码.. 以及整个内容的链接。 【参考方案1】：

这是两个修复程序。

首先，关于固定侧边栏，你需要给它一个高度让它溢出：

HTML 代码：

<div id="sidebar">Menu</div>
<div id="content">Text</div>

CSS 代码：

body font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;
#sidebar position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;
#content width:80%; padding-left:20%;

@media screen and (max-height:200px)
    #sidebar color:blue; font-size:50%;

现场示例： http://jsfiddle.net/RWxGX/3/

如果您的内容超出了 div 的高度，则不可能没有滚动条。这就是为什么我添加了屏幕高度的媒体查询。也许您可以针对短屏幕尺寸调整样式，这样滚动就不需要出现了。

干杯，伊格纳西奥

【讨论】：

查看我发布的 JSFiddle 示例。你会看到问题。这在旧版浏览器中不起作用，例如 ios 4.2 的 Mobile Safari【参考方案2】：

使用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/

【讨论】：

工作。我需要这个来改编一篇 Codrops 文章。有些人可能还需要使用 left 和 right 设置为 0。非常感谢，祝你好运如果将“overflow-y”设置为自动，当内容在视口内时滚动条会消失。也就是说，不溢出就不会有滚动条，溢出了就会有滚动条。正确。我只是在使用他的 css 并修复真正损坏的东西。不过，他似乎已经在他的问题中找到了答案。成功了！很好的解决方案。我仍然没有得到底部：0 部分..你能解释一下吗？？添加 top:0 和 bottom:0 同时在位置固定元素中省略高度会导致浏览器拉伸元素以使顶部位于 0 且底部位于 0。【参考方案3】：

为任何想要做类似但在水平方向上的人留下答案，就像我想要的那样。

调整@strider820 的答案如下所示：

.fixed-content         //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;

就是这样。还要检查此comment，其中@train 解释使用overflow:auto 而不是overflow:scroll。

【讨论】：

【参考方案4】：

一般来说，固定部分应该设置width、height和top、bottom属性，否则无法识别其大小和位置。

如果使用的框是 body 的直接子框并且有邻居，那么检查 z-index 和 top, left 属性是有意义的，因为它们可能会相互重叠，这可能会影响滚动内容时的鼠标悬停。

这里是内容框（body 标签的直接子代）的解决方案，通常与移动导航一起使用。

.fixed-content 
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;

希望它可以帮助任何人。谢谢！

【讨论】：

【参考方案5】：

这里的解决方案对我不起作用，因为我正在设计 react 组件。

对侧边栏有用的是