Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »
Как прижать футер к низу страницы (руководство к действию) (страница комментариев 3)
26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.
Есть что сказать? Не молчим!
|
аттестат за 9 класс купить цена в Балашихе здесь
balashiha.go-diplom.com
|
|
купить настоящий аттестат в СПб на сайте
sankt-peterburg.exdiplomis.com
|
66 комментариев на «Как прижать футер к низу страницы (руководство к действию)»
сережка
трудно что то сделать не так ) хотя возможно конечно. В файрфоксе — все ок. В опере делаю так:
сжимаю, растягиваю по горизонтали, футер подвисает, но когда опять нажимаю на мышь что бы сжать окошко, он прыгает на старое место.
С моей любимой оперой постоянно какие то косяки вылазят.
Княгиня (660 комментариев)
Вот никогда такого не видела. Увы, остаётся всё свалить на глюки Оперы. За ней это водится.
Takasu (2 комментария)
Большое спасибо)
Много статей перерыл, не работало нихрена.. А вот с помощью ваших советов всё получилось))
Takasu (2 комментария)
А у меня наоборот глюки с лисой =_=»» Сегодня долго сидел разбирался почему в правом фрейме блоки напирают друг на друга, оказалось float: left забыл %). Так мало того лиса отказалась отобразить , я вообще в последнее время ей недоволен)
Макс (1 комментарий)
О! спасибо! правда мне не подвал, а на весь экран полупрозранчый див а с текстом по клику нарисовать надо было.. замучался с тем что он обрезался по высоте монитора а не страницы.
iEnot (4 комментария)
Единственный рецепт который помог но есть одно небольшое но… так уж сложился дизайн что в зоне футера находится доп. меню и оно получается позиционируется по левому борту а задача требует его расположения по левому краю контента….. куда делся мой русский язык
при изменении размера окна браузера меню тоже должно менять свое положение а оно статично прижато слева. Подскажите возможно ли решение такой задачи?
http://atmosferaplus.com
iEnot (4 комментария)
Вопрос снимается :)) не заметил у себя в стиле меню float: left;
iEnot (4 комментария)
Ан нет… прошу прощения — напостил но меню так и находится в фиксированном положении, таки вопрос остается.
Княгиня (660 комментариев)
Начнём с того, что сейчас у вас футер вложен в множество вложенных дивов. Мой рецепт предполагает, что футер должен быть дочерним элементом 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>Княгиня (660 комментариев)
По приведённой ссылке у вас не дочерний, а пра-пра-пра… короче, дальний потомок. Футер должен лежать прямо в body, а не через промежуточные контейнеры, а у вас родителем #footer является .wrapper, а не body. Вероятнее всего, где-то посередине болтаются другие незакрытые div’ы. Проверьте тщательней. Рекомендую использовать Фаербаг к Фаерфоксу или встроенные инструменты разработчика Хрома.
Bomgpe (2 комментария)
Спасибо и респект автору! Способ помог при очень сложной верстке.