Question

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

包装元素直接位于视口的顶部和底部，因此其高度始终是浏览器窗口的100％。

包装器元素中的菜单元素有一个盒子阴影，它溢出了右侧的包装器。通常这不是问题，阴影仍然可见。

但是，我需要使包装器可滚动，以防里面的菜单元素高于包装器本身。但添加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;
}

请检查这个小提琴： http://jsfiddle.net/Kc9Zk/

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

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

Answer 1

对此的一个解决方案是通过使用正间距（填充）使包装器比元件更宽。如果向包装器添加填充，则可以使其更宽，同时仍然隐藏滚动条。

#wrapper{
    padding: 0 10px;
}

当我不在手机上时，我会做一个小提琴。

CSS绝对定位，box-shadow和overflow auto

1 个答案: