HTML 5 Тэг Footer всегда находится внизу

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

<!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

Ответ 1

HTML5 footer tag не волшебным образом помещает содержимое в конец страницы - вам все равно нужно стилизовать его так же, как и всегда. В этом отношении он работает точно так же, как <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 на вашей странице.

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

Ответ 2

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

Основной 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;
}

Ответ 3

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

http://www.modernizr.com/

А также, возможно, взгляните на:

http://html5boilerplate.com/

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

Ответ 4

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

Ответ 5

Есть хороший JS, чтобы получить поддержку HTML5 для IE < 9... другие браузеры уже поддерживают HTML5-элементы.

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

Ответ 6

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