У меня есть абсолютная позиционная оболочка 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/
Как я могу сделать тень видимой, если нет полосы прокрутки?
Обратите внимание, что я не хочу, чтобы оболочка была более широкой, чем элементы внутри, потому что полоса прокрутки выглядела бы несколько неуместной, если она видна.
Одно из решений заключается в том, чтобы сделать упаковщик более широким, чем элементы, используя положительный интервал (дополнение). Если вы добавите дополнение к обертке, вы можете сделать его более широким, все еще скрывая полосу прокрутки.
#wrapper{
padding: 0 10px;
}
Я сделаю скрипку, когда не буду на моем телефоне.