191

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

我在菜单的滚动左侧有一个固定位置的 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。

4

5 回答 5

311

使用的问题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/

于 2013-08-21T20:01:18.563 回答
17

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

对侧边栏有用的是

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

希望这可以帮助某人。

于 2020-02-07T02:07:09.947 回答
12

一般来说，固定部分应该设置width,height和top,bottom属性，否则它不会识别它的大小和位置。

z-index如果使用的框是 body 的直接子并且有邻居，那么检查和属性是有意义的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;
}

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

于 2019-08-22T13:29:37.450 回答
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 的高度，则不可能没有滚动条。这就是为什么我添加了屏幕高度的媒体查询。也许您可以针对短屏幕尺寸调整样式，这样就不需要出现滚动了。

干杯，伊格纳西奥

于 2013-04-18T23:46:04.767 回答
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使用 over 解释的此评论。overflow:autooverflow:scroll

于 2019-04-08T13:42:47.047 回答