HTML 5 нижний колонтитул тег быть всегда внизу

Я разрабатываю сайт в формате 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

6 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