Как полностью скрыть вертикальную тень?

Question

[DennyD314]

Всем привет!
У меня есть контейнер с высотой 100% . Внутри хедер, контент, футер. От хедера margin-bottom задан некий. Тень задается контейнеру и футером наследуется. Проблема в том, что при длинной странице, так как высота контейнера 100% часть блока контент остается без тени. При наследовании параметров тени контентом у контейнера получается ужасная тень между хедером и контентом. Можно как то полностью исключить вертикальные тени?

box-shadow:
5px 0 15px rgba(0, 0, 0, 0.1),
-5px 0 15px rgba(0, 0, 0, 0.1);

Comments

[Ankhena]

https://jsfiddle.net/

[DennyD314]

Ankhena W: Думаю суть вопроса понятна и без наглядного примера .

[Ankhena]

DennyD314: ну тогда, ответ, ошибка в задании высоты

[DennyD314]

высота задана с расчетом на то, чтобы футер прижимался на коротких страницах, то есть

html,
body,
#center {
height: 100%;
}

где #center - центральный контейнер с горизонтальными отступами, в котором находится все содержимое.
Которому задана тень. Так как его высота задана изначально 100% высоты экрана, то он не растягивается по контенту.

Решил следующим образом:
Убрал margin-bottom у хедера.
Добавил padding-top к контенту.
Убрал тени у основного блока, дабы избежать наложения при наследовании.
Добавил тени к футеру, хедеру и контенту.

Мб я дико перемудрил?

[Ankhena]

DennyD314: может, jsfiddle? ;)

[DennyD314]

Ankhena W: не, там че то гемор дикий какой-то с бутстрапом. Вроде и так норм выглядит)

[Ankhena]

DennyD314: ну и славно