Тег HTML 5 футер всегда внизу

Я разрабатываю сайт в HTML 5. Я обернуть все мое содержимое футера в тег footer. Как код ниже 

<!DOCTYPE html>

<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>

однако выше код не является фактическим кодом сайта, поскольку я не могу поделиться. Может кто-нибудь, пожалуйста, предложите мне лучший способ сделать это в HTML 5, чтобы он работал на всех основных браузерах, таких как IE-6,7,8 / Firefox/ Safari / Crome / Opera

19
html html5 sticky-footer

6 ответов

нижний колонтитул HTML5 не волшебным образом помещает содержимое в нижнюю часть страницы - вы все равно должны стилизовать его так же, как и всегда. В этом отношении он работает точно так же, как <div>, поэтому вы должны рассматривать его как таковой, указав CSS, чтобы он отображался по назначению:

footer {
   //CSS code to make it display at the bottom, same as you would have done for a div.
}

нижние колонтитулы, прикрепленные к нижней части страницы, известны как"липкие нижние колонтитулы". Вы можете найти более подробную информацию о том, как добиться эффекта здесь: http://www.cssstickyfooter.com/

на <footer> сам тег (вместе со всеми другими новыми тегами HTML5) существует не для магии макета, а для семантических целей; т. е. чтобы кто-то читал код (или, скорее, бот), что данные внутри тега являются данными нижнего колонтитула.

С точки зрения поддержки браузера, все текущие браузеры позволят вам указать новые теги HTML5, кроме IE, но, к счастью, все версии IE (даже IE6) могут быть вынуждены разрешить это путем включения HTML5Shiv hack на странице.

надеюсь, что это поможет.

36

Это должно привести вас туда, куда вы хотите пойти: (отредактировано, чтобы добавить дополнительную строку, чтобы разметка кода показывала хорошо)

основной HTML:

<footer>
    <div class="colwrapper">
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
        <div class="fltcol">col1</div>
    </div>
</footer>

вот CSS:

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 100px; /* bottom = footer height */
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: #949494;
    color: #ffffff;
}

.colwrapper{
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
}

/* Specify a 40 pixels gap between the columns: */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

/* Specify the width, style and color of the rule between columns: */

-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
4

пока люди предлагают html5shiv, я рекомендую также использовать modernizr:

http://www.modernizr.com/

а также, возможно, взглянуть на:

http://html5boilerplate.com/

Это поможет всем браузерам правильно отобразить ваш сайт. Удача.

2

вы делаете это точно так же, как и в HTML4.01.

0

есть хороший JS, чтобы получить HTML5-поддержку IE

https://code.google.com/p/html5shiv/#

0

использование абсолютной позиции для <footer> работает, но если у вас есть расширяющийся контент, поскольку ваша основная ширина растет, вы увидите проблему или при использовании inspect нижний колонтитул начинает висеть в середине экрана. Не идеальное решение, но использование фиксированного дна просто решает проблему.

0