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

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

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

我还试过增加高度:100%也是为了看看这是不是一个问题，但也没有效果……也没有固定的高度，比如600px。

384370 次浏览
小开

这里有两个修复。

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

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%;}
}
< p >生活的例子: http://jsfiddle.net/RWxGX/3/ < / p >

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

< p >欢呼, Ignacio < / p >
小开
最佳答案

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

小开

给任何想做类似事情但在水平方向的人留下一个答案，就像我想做的那样。

像下面这样调整@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。

小开

一般来说，固定的section应该设置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;
}

希望能对大家有所帮助。谢谢你！

小开

这里的解决方案并不适用于我，因为我正在设计react组件。

但对侧边栏有效的是

.sidebar{
position: sticky;
top: 0;
}

希望这能帮助到一些人。


提交答案