Как прижать футер к низу страницы (руководство к действию) (страница комментариев 3)

26 сентября 2010. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Мой любимый рецепт, которым я пользуюсь, как бы не соврать, лет пять. Абсолютно кроссбраузерный. Краткое изложение рецепта: Читать полностью »

Отзывы (66) на «Как прижать футер к низу страницы (руководство к действию)»
  1. сережка

    трудно что то сделать не так ) хотя возможно конечно. В файрфоксе — все ок. В опере делаю так:
    сжимаю, растягиваю по горизонтали, футер подвисает, но когда опять нажимаю на мышь что бы сжать окошко, он прыгает на старое место.
    С моей любимой оперой постоянно какие то косяки вылазят. =)

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Вот никогда такого не видела. Увы, остаётся всё свалить на глюки Оперы. За ней это водится.

      Ответить на этот комментарий
      • Takasu (2 комментария)

        Большое спасибо) =) Много статей перерыл, не работало нихрена.. А вот с помощью ваших советов всё получилось))

        Ответить на этот комментарий
    • Takasu (2 комментария)

      А у меня наоборот глюки с лисой =_=»» Сегодня долго сидел разбирался почему в правом фрейме блоки напирают друг на друга, оказалось float: left забыл %). Так мало того лиса отказалась отобразить , я вообще в последнее время ей недоволен)

      Ответить на этот комментарий
  2. Макс (1 комментарий)

    О! спасибо! правда мне не подвал, а на весь экран полупрозранчый див а с текстом по клику нарисовать надо было.. замучался с тем что он обрезался по высоте монитора а не страницы.

    Ответить на этот комментарий
  3. iEnot (4 комментария)

    Единственный рецепт который помог но есть одно небольшое но… так уж сложился дизайн что в зоне футера находится доп. меню и оно получается позиционируется по левому борту а задача требует его расположения по левому краю контента….. куда делся мой русский язык :( при изменении размера окна браузера меню тоже должно менять свое положение а оно статично прижато слева. Подскажите возможно ли решение такой задачи?

    http://atmosferaplus.com

    Ответить на этот комментарий
  4. iEnot (4 комментария)

    Вопрос снимается :)) не заметил у себя в стиле меню float: left;

    Ответить на этот комментарий
  5. iEnot (4 комментария)

    Ан нет… прошу прощения — напостил но меню так и находится в фиксированном положении, таки вопрос остается.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Начнём с того, что сейчас у вас футер вложен в множество вложенных дивов. Мой рецепт предполагает, что футер должен быть дочерним элементом body.

      Далее, как я понимаю, у вас ширина сайта фиксирована. В таком случае нужно задавать фиксированную ширину элементу body, а чёрный фон назначить элементу html, потому что футер выстраивается по body, а оно имеет дефолтовую ширину 100%. Где граница body, там и граница футера. Значит, фиксируем по ширине и центрируем либо body, либо меню, содержащееся в футере (второй случай — если вам нужен чёрный подвал, растянутый вширь).

      Ответить на этот комментарий
  6. 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>
    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      По приведённой ссылке у вас не дочерний, а пра-пра-пра… короче, дальний потомок. Футер должен лежать прямо в body, а не через промежуточные контейнеры, а у вас родителем #footer является .wrapper, а не body. Вероятнее всего, где-то посередине болтаются другие незакрытые div’ы. Проверьте тщательней. Рекомендую использовать Фаербаг к Фаерфоксу или встроенные инструменты разработчика Хрома.

      Ответить на этот комментарий
  7. Bomgpe (2 комментария)

    Спасибо и респект автору! Способ помог при очень сложной верстке.

    Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.