Тень поля CSS на контейнерном отделении вызывает полосы прокрутки
У меня есть веб-сайт со следующей установкой:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
Я использую clearfooter и нижний колонтитул вне контейнера для хранения нижнего колонтитула внизу страницы, когда нет достаточного количества содержания.
Моя проблема состоит в том, что я хотел бы применить тень поля на контейнерное отделение следующим образом:
#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;}
Поскольку Вы видите, что это - падающая тень на на каждой стороне контейнерного отделения. Однако в выполнении этого, когда содержание не поднимает полную высоту, существуют все еще полосы прокрутки, вызванные тенью, проталкивающейся мимо нижней части нижнего колонтитула из-за размытости.
Есть ли некоторый способ препятствовать тому, чтобы тень шла мимо края контейнерного отделения и вызвала полосу прокрутки?
Спасибо за помощь!
7 ответов
Webkit недавно изменил свое поведение, как указано здесь: http://archivist.incutio.com/viewlist/css-discuss/109662
Действительно, на сегодняшний день это все еще проблема в Gecko и, возможно, других браузерах.
Мне удалось решить эту неприятную проблему в Gecko, используя отрицательные поля, которые также работают во всех других браузерах.
Предположим, у вас есть широкоэкранный элемент (E) с box-shadow, примененным с нулевым смещением и радиусом размытия R. Предположим, вы имеете дело с проблемой горизонтальной полосы прокрутки, потому что тень заставляет элемент E ретранслироваться с добавленной шириной.
- обернуть E вспомогательным элементом оболочки (W)
- установить переполнение: скрыто на W
- установить заполнение: R 0 R 0 на W
- установить поле: -R 0 -R 0 на W
Идея состоит в том, чтобы использовать скрытое перетекание, чтобы вырезать проблемные тени слева и справа. А затем используйте трюк с заполнением + отрицательным полем, чтобы не обрезать верхнюю и нижнюю тени и удерживать поле в одном месте в потоке HTML.
Вы можете адаптировать эту технику, чтобы вырезать произвольные стороны вашего проблемного теневого бокса.
В родительском элементе #container добавление overflow: visible может решить проблему.
Хотя в качестве общего совета для нижнего колонтитула, вы можете забыть об установке min-height на #container и вместо этого установить footer с position: absolute и bottom: 0 и задайте #container margin-bottom, чтобы он никогда не скрывался за футером. Если вы хотите, чтобы колонтитул располагался внизу окна, просто используйте position: fixed.
Надеюсь, это поможет.
Имхо, и, согласно моим тестам, похоже, что тень css на элементе увеличивает как общую ширину, так и высоту страницы ( если окружающий элемент имеет ширину или высоту, равную 100%), как вы сказали, и я еще не нашел обходного пути css для этой проблемы.
У меня к вам вопрос: как вы держите нижний колонтитул внизу страницы? и какую ширину имеет нижний колонтитул?
Я пробовал использовать абсолютное позиционирование (как Я привык делать, когда мне нужен нижний колонтитул внизу страницы), но проблема То же самое и с шириной, конечно, вы можете установить ширину в процентах, например, 90%, но проблема остается ... {{ 1}} вот отрывок, который иллюстрирует эту простую концепцию Так что это не настоящий ответ, я еще не нашел решения для этого
Надеюсь, это полезно
{{ 1}}Ну, либо решение этой проблемы очень неясно, либо нет решения с текущей технологией. Очень жаль, что это невозможно сделать, поскольку это обычная тема в веб-дизайне.
Я прибег к использованию тени png, так как это кажется единственным разумным решением.
Не уверен, что это лучшее решение, так как вам нужно добавить контейнер div, но если вы оберните элемент в контейнер div и установите значение переполнения как скрытое, похоже, это сработает. Вам нужно будет установить отступ там, где вы хотите, чтобы тень была видна.
Я знаю, что это не лучшее решение, но оно работает нормально, и я не могу придумать другого решения.
Попробуйте добавить padding-bottom:8px (высота тени + размер размытия) к элементу #container.
Лучшее решение, по крайней мере для меня, поскольку оно не включает в себя элемент обертки, состоит в том, чтобы поместить прямоугольник обрезки на элемент с тенью.
В приведенном выше примере что-то вроде
clip: rect(-LARGE_VALUE -LARGE_VALUE auto LARGE_VALUE) обрезает тень только снизу.