TCD*_*ory 139 javascript css scroll css-position overflow
我实际上有两个问题,但我们首先解决主要问题,因为我相信另一个问题更容易解决.
我在滚动的左侧有一个固定的位置div用于菜单.右侧是一个正确滚动的标准div.问题是,当浏览器视口太小而无法看到整个菜单时......没有办法让它滚动我可以找到(至少不用css).我尝试在css中使用不同的溢出,但没有任何东西使div滚动.包含菜单的div设置为min-height:100%和position:fixed ..我需要保留的两个属性.
包含菜单的div 位于另一个绝对定位且高度设置为100%的包装div内.
如果内容对于div来说太高,我怎么能让它垂直滚动？
这导致我另一个问题,我不想要滚动条显示..但我想我可能已经有了答案(只有它还没有工作,因为我不能让div滚动开始).
有解决方案吗 也许需要javascript？(我对此知之甚少)
以及导致问题的相关代码(因为在这里发布整个东西太长了):
.fixed-content {
min-height:100%;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
还尝试添加高度:100%也只是为了看看是否是一个问题,但它也没有工作...也没有固定的高度,如600px.
str*_*820 224
使用的问题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/
小智 13
这里的解决方案对我不起作用，因为我正在设计 React 组件的样式。
虽然对侧边栏有用的是
.sidebar{
position: sticky;
top: 0;
}
希望这可以帮助某人。
Ole*_* O. 10
一般而言，固定部分应设置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;
}
希望它可以帮助任何人。谢谢！
这是两个修复程序。
首先，关于固定侧边栏，你需要给它一个高度让它溢出：
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 的高度，则不可能不获得滚动条。这就是我为屏幕高度添加媒体查询的原因。也许您可以调整短屏幕尺寸的样式，这样滚动就不需要出现了。
干杯，伊格纳西奥