HTML 5 нижний колонтитул всегда внизу - PullRequest
Новая
       3

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

19 голосов
/ 11 ноября 2010

Я занимаюсь разработкой сайта в 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 ]

36 голосов
/ 11 ноября 2010

Тег нижнего колонтитула 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 .

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

4 голосов
/ 15 ноября 2013

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

Основной 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;
}
2 голосов
/ 04 августа 2011

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

http://www.modernizr.com/

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

http://html5boilerplate.com/

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

0 голосов
/ 23 марта 2016

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

0 голосов
/ 11 ноября 2010

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

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

0 голосов
/ 11 ноября 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...