19

HTML5でサイトを開発しています。すべてのフッターコンテンツをフッタータグでラップしています。以下のコードのように

<!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のようなすべての主要なブラウザで動作するように、HTML5でこれを行うための最良の方法を誰かに提案してもらえますか？

4

6 に答える 6

37

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 タグを指定できますが、幸いなことに、ページにHTML5Shiv ハックを含めることで、IE のすべてのバージョン (IE6 を含む) で強制的に許可することができます。

それが役立つことを願っています。

于 2010-11-11T12:47:32.490 に答える
4

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

基本的な 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;
}
于 2013-11-15T18:28:56.797 に答える
2

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

http://www.modernizr.com/

また、以下もご覧ください。

http://html5boilerplate.com/

これにより、すべてのブラウザーがサイトを適切に表示できるようになります。幸運を。

于 2011-08-04T12:39:23.903 に答える
0

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

于 2016-03-23T17:08:43.647 に答える
0

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

于 2010-11-11T12:13:27.010 に答える
0

IE<9 の HTML5 サポートを取得するための優れた JS があります。他のブラウザーは既に HTML5 要素をサポートしています。

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

于 2010-11-11T12:13:48.030 に答える