Обёртка с тенью и футер

[prowoke]

Доброй ночи. Вчера по совету одного форумчанина я сделал тень у сайта с помощью css стиля box-shadow. Я обернул весь свой сайт в div и дал этому диву стиль.

Но сейчас я заметил, что теперь футер не прижимается к низу браузера, что впринципе и логично, но вчера я об этом не подумал. Сейчас я пробовал делать 2 обёртки. Отдельно для wrapper и отдельно для футер, но получается тоже не совсем то, что нужно. Да и видимо это совсем уж искусственный способ. В общем посоветуйте как это можно реализовать. Мне надо, чтобы тень у сайта была и футер прижимался. Вот ссылка для наглядности:

http://deluxe-okna.ru/production/index.php

[swetlana]

прижимание футера к низу ведь тут должно быть основано на чём?

на том, что всему даётся высота 100%.

А блоку с тенью почему-то не даётся.

div#wrapper { height: 100%; } — а от чего?

Правильно, от родителя.

А родитель кто? Правильно, div.shadow.

А у div.shadow какая высота? В css она явно не задана, значит автоматом выстраивается по высоте содержимого.

А содержимое что? Правильно, div#wrapper. А у него какая высота?

Правильно, 100% от того, что принимает его собственную высоту.

Чушь, не правда ли?

Не надо прерывать цепочку. Дайте этой тени тоже высоту 100%

Edited March 22, 2011 by swetlana

[prowoke]

Вот, что получилось после того как выставил height: 100%

http://deluxe-okna.ru/

Логику я понял и вроде должно работать. Только он почему то вытягивает не на весь контент, который в нём находится.

[tius]

Можно добавить к .shadow {display: table;}

[swetlana]

ну так надо не просто копировать то, что советуют, а подходить творчески, осознавать высший смысл каждой строки.

Браузеры — они ж послушные. Им что скажешь, то они и делают.

Сказано — 100%, значит 100%. Что мы и видим по приведённому адресу.

А если добавить ещё и min-height: 100% — будет уже больше похоже на ожидаемое.

[drasute]

http://html-css.info/2009/07/footer-css/

Работающий способ во всех браузерах, сам так делал.

[prowoke]

http://html-css.info/2009/07/footer-css/

Работающий способ во всех браузерах, сам так делал.

Спасибо конечно, но у меня немного другая проблема. Мне нужно не просто прижать футер к низу, но ещё, чтобы тень вместе с ним прижималась.

ну так надо не просто копировать то, что советуют, а подходить творчески, осознавать высший смысл каждой строки.

Браузеры — они ж послушные. Им что скажешь, то они и делают.

Сказано — 100%, значит 100%. Что мы и видим по приведённому адресу.

А если добавить ещё и min-height: 100% — будет уже больше похоже на ожидаемое.

Тоже самое. Я не только на своём шаблоне попробовал данный совет. Я взял сделал на конструкторе шаблон с футером, прижатым к низу, поместил всё в див с тенью и эффект такой же. Тень уходит куда то вверх, как будто она не обводит футер, хотя футер да, прижат к низу. И я не совсем просто копирую строчки и не понимаю, что они делают. Я боле менее пытаюсь понять как это всё работает, просто пока плохая картинка в голове как все элементы взаимодействуют, вот и торможу.

[SelenIT]

prowoke, вам уже намекнули, что тень нужно применять не к элементу с height:100% (высотой с окно браузера), а к его потомку с min-height:100% (не меньше высоты окна). В коде по ссылке сейчас это .wrapper. А отдельная обертка .shadow, по-моему, вообще не нужна...

[prowoke]

prowoke, вам уже намекнули, что тень нужно применять не к элементу с height:100% (высотой с окно браузера), а к его потомку с min-height:100% (не меньше высоты окна). В коде по ссылке сейчас это .wrapper. А отдельная обертка .shadow, по-моему, вообще не нужна...

Спасибо. Я совсем shadow убрал и обернул тенью wrapper и получил то, что надо.

[swetlana]

вот.

Наконец-то.

А я свой главный принцип уже не советую всем и каждому открытым текстом, а в подпись отправила.

Но видимо никто не обращает внимания. Надо наверно обратно каждому прямо говорить?