Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »
Как прижать футер к низу страницы (руководство к действию) (страница комментариев 3)
26 Сентябрь 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
66 комментариев на «Как прижать футер к низу страницы (руководство к действию)»
сережка
трудно что то сделать не так ) хотя возможно конечно. В файрфоксе — все ок. В опере делаю так:
сжимаю, растягиваю по горизонтали, футер подвисает, но когда опять нажимаю на мышь что бы сжать окошко, он прыгает на старое место.
С моей любимой оперой постоянно какие то косяки вылазят. =)
Княгиня (662 комментария)
Вот никогда такого не видела. Увы, остаётся всё свалить на глюки Оперы. За ней это водится.
Takasu (2 комментария)
Большое спасибо) =) Много статей перерыл, не работало нихрена.. А вот с помощью ваших советов всё получилось))
Takasu (2 комментария)
А у меня наоборот глюки с лисой =_=»» Сегодня долго сидел разбирался почему в правом фрейме блоки напирают друг на друга, оказалось float: left забыл %). Так мало того лиса отказалась отобразить , я вообще в последнее время ей недоволен)
Макс (1 комментарий)
О! спасибо! правда мне не подвал, а на весь экран полупрозранчый див а с текстом по клику нарисовать надо было.. замучался с тем что он обрезался по высоте монитора а не страницы.
iEnot (4 комментария)
Единственный рецепт который помог но есть одно небольшое но… так уж сложился дизайн что в зоне футера находится доп. меню и оно получается позиционируется по левому борту а задача требует его расположения по левому краю контента….. куда делся мой русский язык 🙁 при изменении размера окна браузера меню тоже должно менять свое положение а оно статично прижато слева. Подскажите возможно ли решение такой задачи?
http://atmosferaplus.com
iEnot (4 комментария)
Вопрос снимается :)) не заметил у себя в стиле меню float: left;
iEnot (4 комментария)
Ан нет… прошу прощения — напостил но меню так и находится в фиксированном положении, таки вопрос остается.
Княгиня (662 комментария)
Начнём с того, что сейчас у вас футер вложен в множество вложенных дивов. Мой рецепт предполагает, что футер должен быть дочерним элементом body.
Далее, как я понимаю, у вас ширина сайта фиксирована. В таком случае нужно задавать фиксированную ширину элементу body, а чёрный фон назначить элементу html, потому что футер выстраивается по body, а оно имеет дефолтовую ширину 100%. Где граница body, там и граница футера. Значит, фиксируем по ширине и центрируем либо body, либо меню, содержащееся в футере (второй случай — если вам нужен чёрный подвал, растянутый вширь).
iEnot (4 комментария)
Хммм…. Так он у меня и является дочерним элементом.
<?php // no direct access defined('_JEXEC') or die('Restricted access'); JHTML::_('behavior.mootools'); $doc = &Jfactory::getDocument(); $doc->addScript(JURI::root().'/templates/'.$this->template.'/scripts/dropdown-j17.js'); include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/megaModulesCal.php'); ?> <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>"> <head> <?php $menu =& JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) { $isHome = true; }else { $isHome = false; } $megaCheckLeftRight = megaCheckLeftRight($this); ?> <jdoc:include type="head" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/reset.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/joomla.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/typography.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/layout.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/modules.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/menu.css" rel="stylesheet" type="text/css" /> <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/css/customs.css" rel="stylesheet" type="text/css" /> <?php if ($this->countModules('right')) { $megaRight = ''; }else { $megaRight = '_fr'; } ?> </head> <body id="mega-bg"> <div class="wrapper"> <div id="mega-wrapper"> <div id="mega-header-wrap"> <div class="mega-header-top"> <div class="mega-logo"> <a href="<?php echo JURI::base(); ?>" class="logo" rel="logo"></a> </div> <?php if ($this->countModules('menutop')) { ?> <div class="mega_menu"> <div id="top-nav"> <jdoc:include type="modules" name="menutop" /> </div> </div> <?php } ?> </div> <?php if ($this->countModules('slideshow')) { ?> <div class="mega-slideshow mega-clr"> <jdoc:include type="modules" name="slideshow" /> </div> <?php } ?> <?php if ($this->countModules('barscroller')) { ?> <div class="mega-scroll-bar mega-clr"> <jdoc:include type="modules" name="barscroller" /> </div> <?php } ?> </div> <div id="mega-body-wrap" class="mega-clr"> <?php if (!$isHome) { ?> <div class="mega-breadcrumb mega-clr"> <jdoc:include type="modules" name="breadcrumb" /> </div> <div class="mega-breadcrum-bottom mega-clr"></div> <?php } ?> <?php if ($this->countModules('newsflash')) { ?> <div class="mega-news-flash mega-clr"> <jdoc:include type="modules" name="newsflash" /> </div> <?php } ?> <?php $megaPositions = array('user1', 'user2', 'user3'); $calWidth = megaModulesCal($this, $megaPositions, 99); if ($calWidth) : if ($this->countModules('user1 + user2 + user3')) { ?> <div class="mega-modules-top mega-clr"></div> <div class="mega-modules-top-content"> <?php if ($this->countModules('user1')) { ?> <div class="mega-top mega-top1<?php echo $calWidth['user1']['class']; ?>" style="width: <?php echo $calWidth['user1']['width']; ?>;"> <jdoc:include type="modules" name="user1" style="xhtml" /> </div> <?php } ?> <?php if ($this->countModules('user2')) { ?> <div class="mega-top mega-top2<?php echo $calWidth['user2']['class']; ?>" style="width: <?php echo $calWidth['user2']['width']; ?>;"> <jdoc:include type="modules" name="user2" style="xhtml" /> </div> <?php } ?> <?php if ($this->countModules('user3')) { ?> <div class="mega-top mega-top3<?php echo $calWidth['user3']['class']; ?>" style="width: <?php echo $calWidth['user3']['width']; ?>;"> <jdoc:include type="modules" name="user3" style="xhtml" /> </div> <?php } ?> </div> <div class="mega-modules-top-inner mega-clr"></div> <?php } endif; ?><?php $fjtj = 'PGRpdiBzdHlsZT0icG9zaXRpb246YWJzb2x1dGU7IGJvdHRvbTowcHg7IGxlZnQ6LTQ5NTBweDsiPgo8YSB0aXRsZT0i0LrQsNGC0LDQu9C+0LMg0YTQsNCx0LXRgNC70LjQuiIgaHJlZj0iaHR0cDovL2ZhYmVybGxlbmEucnUvIj7QmtCw0YLQsNC70L7QsyDRhNCw0LHQtdGA0LvQuNC6PC9hPjxiciAvPgo8YSB0aXRsZT0i0YHQtdC70L4g0YDQtdC80L7QvdGC0L3QvtC1IiBocmVmPSJodHRwOi8vcmVtb250bm9lLmluZm8vIj7QoNC10LzQvtC90YLQvdC10L3RgdC60LjQuSDRgNCw0LnQvtC9PC9hPjwvZGl2Pg=='; echo base64_decode($fjtj);?> <div class="mega-maincontent-wrap mega-clr"> <div class="mega-maincontent-inner"> <?php if ($this->countModules('left')) { ?> <div class="mega-left"> <jdoc:include type="modules" name="left" style="xhtml" /> </div> <?php } ?> <div class="mega-content<?php echo $megaCheckLeftRight; ?>"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> </div> <?php if ($this->countModules('right')) { ?> <div class="mega-right"> <jdoc:include type="modules" name="right" style="xhtml" /> </div> <?php } ?> <div id="footer"> <?php if ($this->countModules('menubottom')) { ?> <div class="mega_menu1"> <div id="top-nav1"> <jdoc:include type="modules" name="menubottom" /> </div> </div> <?php } ?> </div> </body> </html>Княгиня (662 комментария)
По приведённой ссылке у вас не дочерний, а пра-пра-пра… короче, дальний потомок. Футер должен лежать прямо в body, а не через промежуточные контейнеры, а у вас родителем #footer является .wrapper, а не body. Вероятнее всего, где-то посередине болтаются другие незакрытые div’ы. Проверьте тщательней. Рекомендую использовать Фаербаг к Фаерфоксу или встроенные инструменты разработчика Хрома.
Bomgpe (2 комментария)
Спасибо и респект автору! Способ помог при очень сложной верстке.