Футер внизу страницы. Мытарства закончены
Итак, классическая для последнего времени проблема: необходимо прицепить блок футера вниз страницы таким образом, чтобы при количестве контента меньше высоты экрана он был внизу, а при увеличении контента скатывался под него.
Для начала, естественно, полез в сеть в поисках подобных решений. Как оказалось, решений всевозможное количество. Одна проблема: кое-какие не работают в опере и осле. Пришлось кое-что брать, а кое-что и додумывать.
Итак, вот кроссбраузерный валидный результат, позволяющий цеплять футер в самый низ страницы.
Для начала файл html с комментариями
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Подвал должен быть внизу</title> <link href="main.css" rel="stylesheet" type="text/css" /> <!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> < ![endif]--> </head> <body> <div id="wrapper"> <div id="content"> CONTENT HERE </div> <div id="footer"> <div id="footer_content"> FOOTER HERE </div> </div> </div> </body> </html> |
футер мы прячем в основной враппер-блок. Это нужно для того, чтобы мы могли задать абсолютное позиционирования подвала не относительно страницы, а относительно блока в ней. Остальное в этом коде тривиально и не требует пояснений
А вот и CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | * {margin:0; padding:0} </p><p style="text-align: justify">html {height:100%;}</p> <p style="text-align: justify">body { margin:0; padding:0; height:100%; } #wrapper { min-height:100%; position:relative; } #content{padding-bottom:145px;} #footer { height:145px; width:100%; position:absolute; bottom:0; background: #ccc; left:0; //без этой штуки опера отказывается опускать футер вниз } |
Собственно говоря, желающие могут скачать готовый файл с исходным кодом и радоваться жизни.
- У нас лучшие – ремонт однокомнатнай квартиры справки профессионалов, все компании свадебные подарки лучшие комментарии, справки специалистов, электрические генераторы справки, справки специалистов.
- Сегодня благодаря широкополосному доступу в интернет все мы можем смотреть онлайн фильмы. Лично мне по душе классика кинематографа, а вам?
февраля 24, 2010 at 18:46
спасибо за замечательную статью!
июля 8, 2010 at 16:49
СПАСИБО+) ОЧЕНЬ ПОМОГЛО!