Question

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

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

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

如果div的内容太高，怎么能让它垂直滚动？

这引出了我另一个问题，我不想要滚动条显示..但我想我可能已经有了答案（只是它还没有工作因为我无法得到div滚动开始）。

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

JS Fiddle Example

以及导致问题的相关代码（因为在这里发布整件事情的时间太长了）：

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

还尝试添加高度：100％也只是为了看是否是一个问题，但它既不起作用......也没有固定的高度，如600px。

Answer 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/

Answer 2

以下是两个修复程序。

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

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的高度，则无法获得滚动条。这就是我为屏幕高度添加媒体查询的原因。也许您可以针对较短的屏幕尺寸调整样式，以便不需要显示滚动。

干杯，伊格纳西奥

Answer 3

在我设计反应组件的样式时，这里的解决方案对我不起作用。

对于侧边栏有效的是

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

希望这对某人有帮助。

Answer 4

一般来说，固定部分应设置为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;
}

希望它对任何人都有帮助。谢谢！

Answer 5

Leaving an answer for anyone looking to do something similar but in a horizontal direction, like I wanted to.

Tweaking @strider820's answer like below will do the magic:

.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;
}

That's it. Also check this comment where @train explained using overflow:auto over overflow:scroll.

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

5 个答案: