Проблема с внедрением CSS Sticky Footer

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

<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-липкий нижний колонтитул должен быть в моем случае.

Редактировать, Вот что я получил и то, что я хочу сделать: alt text http://bayimg.com/image/gacniaacf.jpg

источник

2009-07-10 mdc

CSS Sticky Footer не работает для меня ни в FF3, ни в IE8. Возможно, это часть проблемы. – Eric

Я обновил свой ответ, чтобы включить фактический образец кода для вашего макета. Работает отлично для меня в IE8 и FF2.5 – ChssPly76

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

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

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

Обновление: Хорошо, вот версия, которая работает. Табличка стилей «Sticky Footer» взята с 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>

источник

2009-07-10 21:39:12 ChssPly76

banner-bg должен покрывать 100% экрана (ширина), а остальная часть сайта (внутри обертки) должна покрывать только фиксированную ширину и центрироваться в окне. Я не мог думать о другом способе этого. Это то, что у меня есть и нужно: http://img43.imageshack.us/img43/5470/sitestructure.png – mdc

Благодарим за обновление, я не смогу проверить это на несколько дней, но я буду напишите, когда я это сделал. Если это сработает, ты лучший :) – mdc

Извините, я не ответил, я сделал перерыв на все лето. Я немного изменил ваш код, и теперь он работает - структура div должна была быть немного уродливой, но она работает. Бесконечно благодарен. – mdc

Вместо изменения существующих стилей (или с помощью 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/тела, и позиция относительно должна быть объявлена.

Также, в отношении xHTML, обратите внимание на то, что div нижнего колонтитула не находится внутри «контейнера» div, а скорее вне его (так что есть два отдельных контейнерных divs, контейнер и нижний колонтитул) ,

Если по-прежнему возникают проблемы, основные проблемы, связанные с разметкой IS:

100% высота должна быть объявлена для HTML и тел тега.
отрицательный запас отсутствует на контейнер DIV, который является # баннером-BG
если колонтитул 100px высоким, # баннера-BG должен иметь край дно: -100px

позиция должна быть относительными на оба # баннер-BG и #footer

HTML {высота: 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>

источник

2009-07-10 23:39:11

Прежде всего, ваш код не работает (как минимум, ему не хватает 'height: 100%' декларация для 'html'). Во-вторых, исходный вопрос включал ссылку на страницу с описанием того, как реализовать липкий нижний колонтитул - ** mdc ** спрашивает, как применить его к сценарию _his_. – ChssPly76

Да, это правильно ChssPly76. Я просто добавил изображение, чтобы проиллюстрировать, с чем мне нужно работать. – mdc

ChssPly76, вы правы! Я случайно потерял html-тег в стилях (набрал его в спешке). Всегда хорошо, чтобы обеспечить унаследованные стили! ТАКЖЕ, я упустил минимальную высоту (которая не признана в IE6), но я бы добавил ее, чтобы нижний колонтитул оставался внизу, несмотря ни на что, ни на какой контент. –

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

источник

2009-07-15 13:04:53

или делать то, что делает facebook со своей строкой состояния - оно фиксируется в нижней части экрана, и для этого не требуется javascript. – Chii

Замечательно, что можно реализовать липкий нижний колонтитул с использованием только 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%; }

источник

2013-05-13 15:35:27

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

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

В CSS:

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

Выполните эту HTML структуру. Контент не может находиться за пределами тегов .wrapper и .footer div, если он не находится абсолютно с CSS. Также не должно быть содержимого внутри div .push, поскольку это скрытый элемент, который «толкает» нижний колонтитул, чтобы он не перекрывал ничего.

В HTML Тело:

Ваш сайт содержание здесь.

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

источник

2013-07-08 10:58:12

Проблема с внедрением CSS Sticky Footer

ответ

Смежные вопросы