web-dev-qa-db-ja.com

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>

ただし、上記のコードは、共有できないため、実際のサイトコードではありません。 IE-6,7,8/Firefox/Safari/Crome/Operaのようなすべての主要なブラウザで動作するように、HTML 5でこれを行う最良の方法を誰かに教えてください

htmlhtml5sticky-footer
19
vaibought

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タグと一緒に）は、レイアウトのマジックを行うためではなく、セマンティック上の目的のためにあります。つまり、コードを読んでいる人（またはおそらくボット）に、タグ内のデータがフッターデータであることを明確にするためです。

ブラウザのサポートに関しては、現在のすべてのブラウザでIEを除く新しいHTML5タグを指定できますが、幸いなことにIE（IE6さえ）のすべてのバージョンが- HTML5Shiv hack ページ内。

お役に立てば幸いです。

36
Spudley

これにより、目的の場所に移動できます：（コードマークアップが適切に表示されるように行を追加するように編集されています）

基本的な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
socialmatchbox

人々はhtml5shivを提案していますが、modernizrも使用することをお勧めします。

http://www.modernizr.com/

また、次の項目もご覧ください。

http://html5boilerplate.com/

これは、すべてのブラウザーがサイトを適切にレンダリングするのに役立ちます。幸運を。

2
rickyduck

これは、HTML4.01で行うのとまったく同じ方法で行います。

0
Rob

IE <9のHTML5サポートを取得するニースJSがあります。…他のブラウザはすでにHTML5要素をサポートしています。

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

0
albuvee

<footer>に絶対位置を使用することはできますが、メインの幅が大きくなるにつれてコンテンツを拡張すると、問題が発生するか、検査を使用すると画面の中央でフッターがハングし始めます。完璧な解決策ではありませんが、固定底を使用するだけで問題は解決します。

0
Derya