У меня есть сайт со следующей настройкой:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
Я использую колонтитул и нижний колонтитул вне контейнера, чтобы нижний колонтитул оставался внизу страницы, когда не хватает содержимого.
Моя проблема в том, что я хотел бы применить тень к блоку контейнера следующим образом:
#container {width:960px; min-height:100%; margin:0px auto -32px auto;
position:relative; padding:0px; background-color:#e6e6e6;
-moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8),
3px 0px 5px rgba(0,0,0,.8);}
#header {height:106px; position:relative;}
#content {margin:0px; padding:10px 30px 10px 30px; position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer {height:32px; padding:0px; position:relative; width:960px;
margin:0px auto 0px auto;}
Как вы можете видеть его тень на каждой стороне контейнера div. Однако при этом, когда содержимое не занимает полную высоту, по-прежнему существуют полосы прокрутки, вызванные тем, что из-за размытия тень проталкивает нижнюю часть нижнего колонтитула.
Есть ли какой-нибудь способ не дать тени пройти через край контейнера div и вызвать полосу прокрутки?
Спасибо за вашу помощь!