logo标签列表

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

cssscrollcss-positionoverflow
226

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

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

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

如果内容太长以至于超出了div，该如何使其垂直滚动？

这也带来了另一个问题，我不想显示滚动条..但我想我可能已经有了答案（只是因为我无法开始滚动div，所以它还没有生效）。

有解决方案吗？也许需要javascript吗？（我对此知之甚少）

JS Fiddle示例

以下是有问题的相关代码（由于在此处发布整个代码太长了）：

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

也尝试添加了height:100%，只是为了看看是否有问题，但这也没有起作用... 一个固定的高度，比如600px也不行。

请发布一个包含您当前使用的HTML和CSS的JSFiddle，以便我们可以查看问题。谢谢！ - mchail
3
你尝试过使用 overflow: auto; 吗？ - Dan
1
是的，overflow:auto或overflow-y:scroll或overflow:scroll都不允许固定的div滚动。 - TCD Factory
滚动条需要的原因是如果一个 div 具有超出其定义长度的太多内容。如果浏览器视口缩小，也不会导致 div 强制执行滚动操作。 - Dan
无法发布JSfiddle和html/css，因为它们太长了，而且如果没有代码，它们不允许您发布JSfiddle链接。:(我只发布了一小部分代码，似乎并没有帮助div滚动...还有整个东西的链接。 - TCD Factory
5个回答
341
使用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文章。有些人可能还需要将左右设置为0。非常感谢，祝好运。 - Santiago Baigorria
26
如果将 "overflow-y" 设置为 auto，则当内容在视口内时滚动条将消失。换句话说，如果内容没有溢出，就不会有滚动条，当内容溢出时，就会出现滚动条。 - train
没错。我只是使用了他的CSS并修复了真正有问题的部分。不过他似乎已经在他的问题中找到了那一部分的答案。 - strider820
我不想让我的内容完全固定在顶部，所以我已经去掉了 top: 0。有没有办法在滚动固定内容时阻止“背景”内容的滚动？这似乎是我遇到的最大可用性问题？ - Richard Young
3
做得好！很好的解决方案。我仍然不明白底部的0部分...您能解释一下吗？ - Gianluca Ghettini
7
在一个固定定位的元素中添加top:0和bottom:0，同时省略height属性，会导致浏览器拉伸该元素以使顶部和底部都位于0位置。 - strider820
33

这里的解决方案对我没有用，因为我正在为React组件进行样式设置。

不过侧边栏所用的是：

.sidebar{
position: sticky;
top: 0;
}
希望这能帮到某些人。
3
多年来我一直在编辑CSS，但对于“sticky position”属性一无所知。谢谢您，这个属性对我实现非常完美！ - 1owk3y
1
可爱的解决方案。谢谢！ - Djoezz
1
天才！我只知道绝对、相对和固定。从来不知道还有粘性定位。 - Dika
谢谢！我已经搜索了2个小时关于如何做到这一点！！ - Can
谢谢。这很容易实现，而且正是我想要的。 - Saad Zahoor
21

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

如果使用的盒子是的直接子元素并且有邻居，则检查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;
}

希望能对任何人有所帮助。谢谢！

正是我所需要的。谢谢！ - user16248109
8

下面是两种解决方法。

首先，对于固定侧边栏，您需要为其指定高度以使其溢出：

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的高度，那么就不可能没有滚动条。这就是为什么我添加了一个屏幕高度的媒体查询。也许您可以调整短屏幕尺寸的样式，这样滚动条就不需要出现了。

祝好， Ignacio

请查看我发布的JSFiddle示例，您将会看到问题所在。 - TCD Factory
这在旧版浏览器中无法使用，例如iOS 4.2的Mobile Safari。 - mheavers
1

如果有人想要做类似我想做的水平方向的事情，以下是留给他们的答案。

像下面这样微调@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;
}

就是这样。还要检查一下 评论，在那里@train使用了overflow:auto而不是overflow:scroll进行了解释。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接