Вопрос по css, footer – Проблема с реализацией CSS Sticky Footer

5

У меня возникли некоторые проблемы с получением липкого нижнего колонтитула для работы на моем сайте. Если содержимое меньше окна, нижний колонтитул должен оставаться в нижней части окна, а мертвое пространство должно быть заполнено элементом div. я думаюCSS Sticky Footer делает это, но я не могу получить & quot; push div & quot; на работу толкнуть содержимое полностью вниз. Как вы можете видеть, мой код не просто нижний колонтитул.

<body>
  <div id="banner-bg">
    <div id="wrapper">
      <div id="header-bg">
        <!-- header stuff -->
      </div> <!-- end header-bg -->
      <div id="content-bg">
        <div id="content">
          <!-- content stuff -->
        </div> <!-- end content -->
      </div> <!-- end content-bg -->
    </div> <!-- end wrapper -->
  </div> <!-- end banner-bg -->
</body>

body { 
    color:              #00FFFF;
    background-image:   url("Images/img.gif");
    font-size:          1em;
    font-weight:        normal;
    font-family:        verdana;
    text-align:         center;
    padding:            0;
    margin:             0;
}

#banner-bg {
    width:              100%;
    height:             9em;
    background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
    position: absolute; top: 0;
}

#wrapper {
    width:              84em;
    margin-left:        auto; 
    margin-right:       auto;
}

#header-bg {
    height:             16em;
    background-image:   url("Images/header/header-bg.png"); 
}

#content-bg {
    background-image:   url("Images/img3.png"); background-repeat: repeat-y;
}

#content {
    margin-right:       2em; 
    margin-left:        2em;
}

Я запутался в том, куда должен идти код CSS Sticky Footer в моем случае.

Отредактируйте, вот что я получил и что хочу сделать: альтернативный текст http://bayimg.com/image/gacniaacf.jpg

Я обновил свой ответ, включив в него пример кода для вашего макета. У меня отлично работает в IE8 и FF2.5 ChssPly76
CSS Sticky Footer не работает для меня ни в FF3, ни в IE8. Возможно, это часть проблемы. Eric

Ваш Ответ

5   ответов
5

Ваш HTML немного странный. Например, почемуbanner-bg обернуть все вокруг?

Тем не менее, чтобы использовать технику Sticky Footer, вам нужно обернутьeverything but the footer в один DIV. Так что ваши<body> тег будет содержать только два верхних DIV -wrapper а такжеfooter, Все, что у вас есть, будет помещено в эту оболочку DIV.

Обратите внимание, что Sticky Footer может не работать для вас, если фоновые изображения, которые вы используете, включают в себя прозрачные области, поскольку полагаются наwrapper фон, охватываемый заголовком.

Update: Хорошо, вот версия, которая работает. & quot; Липкий нижний колонтитул & quot; таблица стилей взята изcssstickyfooter.com и должен работать во всех современных браузерах. Я немного упорядочил ваш HTML (нет необходимости в отдельных фоновых слоях на основе вашего изображения), но вы можете изменить его так, как вам нравится, если вы сохраняете базовую структуру на месте. Кроме того, поскольку у меня нет ваших изображений, я добавил сплошные цвета фона для иллюстрации, вам необходимо их удалить.

<html>
<head>
 <style>
* {margin: 0; padding: 0} 
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px}  /* must be same height as the footer */
#footer {position: relative;
  margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0;   clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */ 

/* Do not touch styles above - see http://www.cssstickyfooter.com */

body {
  background-image: url("Images/img.gif");
  background: #99CCFF;
  color: #FFF;
  font-size: 13px;
  font-weight: normal;
  font-family: verdana;
  text-align: center;
  overflow: auto;
}

div#banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9em;
  background: url("Images/img2.gif") repeat-x;
  background: #000;
}

div#wrap {
  background: #666;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

div#header {
  height: 16em;
  padding-top: 9em; /* banner height */
  background: url("Images/header/header-bg.png");
  background: #333; 
}

div#footer {
  background: #000;
  width: 84em;
  margin-left: auto;
  margin-right: auto;
}

 </style>
</head>
<body>
 <div id="banner">Banner</div>
 <div id="wrap">
    <div id="main" class="clearfix">
     <div id="header">Header</div> 
     <div id="content">
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content<br />
     Content
   </div> <!-- end content -->
    </div> <!-- end main -->
 </div>
 <div id="footer">
  Footer
 </div>
</body>
</html>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededimg43.imageshack.us/img43/5470/sitestructure.png mdc
Error: User Rate Limit Exceeded mdc
Error: User Rate Limit Exceeded mdc
1

Вместо того, чтобы модифицировать ваши существующие стили (или использовать CSS Sticky Footer), мне гораздо проще просто переделать его. Итак, здесь идет:

<html>
<head>
<style type="text/css">
html, body {
    height: 100%;
}
#container {
    height: 100%;
    margin: 0 0 -200px 0;
    position: relative;
}
#footer {
    position: relative;
    height: 200px;  
}

</style>
</head>
<body>

<div id="container">
    <div id="header">Oh Beautiful Header</div>
    <div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>

По сути, отрицательное поле должно соответствовать высоте нижнего колонтитула, высота 100% должна быть применена к html / body, а относительное положение должно быть объявлено.

Также, ссылаясь на xHTML, обратите внимание на то, как «нижний колонтитул» div не ВНУТРИ "контейнера" div, а точнее, вне его (так что есть 2 отдельных div-элемента, похожих на контейнер, контейнер и нижний колонтитул).

Если у вас все еще есть проблемы, основные проблемы с вашей разметкой:

  • 100% height needs to be declared for html and body tag.
  • negative margin is missing on the container div which is the #banner-bg
  • if footer is 100px tall, #banner-bg should have margin-bottom: -100px
  • position needs to be relative on both #banner-bg and the #footer

    html { height: 100%;}

    body { 
        color:                      #00FFFF;
        background-image:   url("Images/img.gif");
        font-size:                  1em;
        font-weight:        normal;
        font-family:        verdana;
        text-align:                 center;
        padding:                    0;
        margin:                     0;
        height: 100%;
    }
    
    #banner-bg {
        width:                      100%;
        height:                     100%;
        background-image:   url("Images/img2.gif"); background-repeat: repeat-x;
        position: relative;
        margin: 0 0 -200px 0;
    }
    
    #wrapper {
        width:                      84em;
        margin-left:        auto; 
        margin-right:       auto;
    }
    
    #header-bg {
        height:                     16em;
        background-image:   url("Images/header/header-bg.png"); 
    }
    
    #content-bg {
            background-image:       url("Images/img3.png"); background-repeat: repeat-y;
    }
    
    #content {
        margin-right:       2em; 
        margin-left:        2em;
    }
    #footer {
        position: relative;
        height: 200px;  
    }
    

и остальное:

    <body>
          <div id="banner-bg">
            <div id="wrapper">
              <div id="header-bg">
                <!-- header stuff -->
              </div> <!-- end header-bg -->
              <div id="content-bg">
                <div id="content">
                  <!-- content stuff -->
                </div> <!-- end content -->
              </div> <!-- end content-bg -->
            </div> <!-- end wrapper -->
          </div> <!-- end banner-bg -->
          <div id="footer">
          Footer Content
          </div>
        </body>
</html>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded mdc
Error: User Rate Limit Exceeded mdc
Error: User Rate Limit Exceededheight: 100%Error: User Rate Limit ExceededhtmlError: User Rate Limit ExceededmdcError: User Rate Limit ExceededhisError: User Rate Limit Exceeded
0

Я не уверен, что намеревался делать Sticky Footer, когда содержание на самом деле длиннее, чем высота вашей страницы ... Если он будет перемещаться по тексту во время прокрутки, тогда я буду использовать Javascript для вычисления нижних координат и размещения нижнего колонтитула на новом слое в фиксированной позиции. Это может быть сделано довольно кросс-браузерным, а также ...

Error: User Rate Limit Exceeded
0

здесь вы можете найти некоторый код следующим образом

Добавьте следующие строки CSS в вашу таблицу стилей. Отрицательное значение для поля в .wrapper - это то же число, что и высота .footer и .push. Отрицательное поле всегда должно соответствовать полной высоте нижнего колонтитула (включая любые отступы или границы, которые вы можете добавить).

In CSS:

height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}

Следуйте этой структуре HTML. Никакой контент не может быть вне тегов div .wrapper и .footer, если он не позиционируется абсолютно с CSS. Также не должно быть содержимого внутри .push div, так как это скрытый элемент, который & quot; толкает & quot; вниз по нижнему колонтитулу, чтобы он ничего не перекрывал.

In HTML Body:

Содержание вашего сайта здесь.

  <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2013</p>
    </div>
0

Замечательно иметь возможность реализовать липкий нижний колонтитул, используя только CSS и HTML, но я не большой поклонник настройки структуры разметки / документа для чего-то косметического.

Я предпочитаю подход JavaScript, без изящной деградации. Если нет JS, нет нижнего колонтитула. Я обычно использую jQuery для реализации:

jQuery

$(window).resize(function() {

    if ($('body').height() < $(window).height()) {
        $('#footer').addClass('fixed');
    }
    else {
        $('#footer').removeClass('fixed');
    }

}).resize();

CSS

#footer.fixed { position: fixed; bottom: 0; width: 100%; }

Похожие вопросы