固定位置侧栏中的溢出问题 [英] 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屋！