html - CSS 绝对定位、box-shadow 和 overflow auto

Question

我有一个绝对定位的包装器 div，其中包含我的菜单元素。

包装器元素直接位于视口(viewport)的顶部和底部，因此它的高度始终为浏览器窗口的 100%。

wrapper 元素内的菜单元素有一个盒子阴影，它在右侧溢出 wrapper。通常这不是问题，阴影仍然可见。

但是，我需要使包装器可滚动，以防内部菜单元素高于包装器本身。但是添加 overflow-y: auto 将剪切菜单右侧的阴影(无论滚动条是否可见)。

HTML

<div id="wrapper">
    <div id="menu">
        <div id="main">Main</div>
        <div id="sub">Sub</div>
    </div>
</div>

CSS

#wrapper {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:250px;
    background-color:#eee;
    overflow-y:auto;
}

#menu {
    position:relative;  
    box-shadow:1px 1px 2px rgba(0,0,0,1);
}

#main {
    height:200px;
    background-color:green;
    padding:5px;
}

#sub {
    height:100px;
    background-color:orange;
    padding:5px;
}

请检查这个 fiddle : http://jsfiddle.net/Kc9Zk/

如果没有滚动条，如何让阴影可见？

请注意，我不想让包装器比内部元素更宽，因为如果可见，滚动条看起来会有点错位。

Answer 1

对此的一种解决方案是使用正间距(填充)使包装器比元素宽。如果向包装器添加填充，则可以在隐藏滚动条的同时使其变宽。

#wrapper{
    padding: 0 10px;
}

---

当我不在手机上时，我会拉 fiddle 。