固定位置侧栏中的溢出问题 [英] Overflow issue in a fixed position sidebar
问题描述
我有一个固定的边栏, overflow-x:hidden
所以我得到一个滚动条滚动。但现在我想添加一个子菜单,当显示时会溢出到主窗口。
如果我设置了 overflow:visible
,那么我就失去了滚动功能。 b
$ b
我可以一起找到他们吗?
http://codepen.io/anon/pen/OPzvdP
#sidebar-wrapper {width:200px; background-color:#396DA5;位置:固定;高度:100%; overflow-x:hidden;}#menu ul ul {display:none; list-style:none;}#menu ul ul {position:relative;}#menu ul li:hover> ul {display:block;}#menu ul ul {padding:50px; position:absolute;左:80%; top:0;背景:#f00;}
< div id = sidebar-wrapper> < div id = menu> < ul> < li>项目悬停< ul> < li> subitem< li> < / ul> < / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < / div>< / div>
item有一个悬停,可以完全看到 overflow-x:hidden
从顶部css行删除,但侧栏不能滚动!
编辑 - 答案有说使用位置:固定
和这工作。
您可以使用<$ c
JSFiddle: //jsfiddle.net/g0e8bg8k/rel =nofollow> http://jsfiddle.net/g0e8bg8k/
#menu ul,#menu li {list-style:none; padding:0; margin:0;}#menu {background:steelblue; width:200px;高度:100%;位置:固定; overflow-x:visible;}#menu> ul {height:100%; overflow-y:auto;}#menu li> ul {width:200px;位置:固定; left:190px; margin-top:-18px;背景:深红色display:none;}#menu li:hover {background:gold;}#menu li:hover> ul {display:block;}
< div id = menu> < ul> < li>包含子菜单< ul>的项目< li> subitem< / li> < li> subitem< / li> < / ul> < / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li>包含子菜单< ul>的项目< li> subitem< / li> < li> subitem< / li> < / ul> < / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li>项< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < li> Item< / li> < / ul>< / div>
修改:修复了Safari上的溢出问题。
#menu> ul {overflow-y:auto;}
I have a fixed sidebar, with overflow-x:hidden
so I get a scrollbar to scroll. But now I want to add a submenu, that when shown will overflow into the main window.
This works fine if I set overflow:visible
but then I lose the scrolling ability.
Can I get them both together?
http://codepen.io/anon/pen/OPzvdP
#sidebar-wrapper {
width: 200px;
background-color: #396DA5;
position: fixed;
height: 100%;
overflow-x: hidden;
}
#menu ul ul {
display: none;
list-style: none;
}
#menu ul ul {
position: relative;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
padding: 50px;
position: absolute;
left: 80%;
top: 0;
background: #f00;
}
<div id="sidebar-wrapper">
<div id=menu>
<ul>
<li>Item Hover
<ul>
<li>subitem<li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</div>
The top li item has a hover, that can be fully see when the overflow-x:hidden
is removed from the top css line, but then the side bar cant be scrolled!
EDIT - Answers have said use position:fixed
and this works. But can this be applied to any of the list items so the submenu opens beside the parent?
You could use position:fixed
on the sub menu too.
JSFiddle: http://jsfiddle.net/g0e8bg8k/
#menu ul, #menu li {
list-style: none;
padding: 0;
margin: 0;
}
#menu {
background: steelblue;
width: 200px;
height: 100%;
position: fixed;
overflow-x: visible;
}
#menu > ul {
height: 100%;
overflow-y: auto;
}
#menu li > ul {
width: 200px;
position: fixed;
left: 190px;
margin-top: -18px;
background: crimson;
display: none;
}
#menu li:hover {
background: gold;
}
#menu li:hover > ul {
display: block;
}
<div id="menu">
<ul>
<li>
Item with submenu
<ul>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>
Item with submenu
<ul>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
Edit: Fixed overflow issue on Safari.
#menu > ul {overflow-y: auto;}
这篇关于固定位置侧栏中的溢出问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!