ホームページ > 記事 > ウェブフロントエンド > page_html/css_WEB-ITnose の下部にあるフッターを修正する方法
page_html/css_WEB-ITnose の下部にあるフッターを修正する方法
- WBOYオリジナル
- 2016-06-21 08:56:431137ブラウズ
方法 1: フッターの高さの固定 + 絶対位置
HTML 構造:
<body> <header>header</header> <main>main content</main> <footer>footer</footer></body>
CSS 設定:
html{height:100%;}body{min-height:100%;margin:0;padding:0;position:relative;}header{background-color: #ffe4c4;}main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}
まず、ボディの高さを少なくとも画面全体を満たすように設定し、ボディをフッターの絶対位置の参照ノードとして使用します。
次に、main の padding-bottom 値を設定します。フッターの前の兄弟要素) をフッターの高さの値以上にして、メインコンテンツがフッターに隠れずに完全に表示されるようにします。
最後に、絶対位置を設定します。フッターの高さを固定の高さの値に設定します。
方法 2: フッターの高さを固定 + 負のマージン
HTML 構造:
<body> <div class="container"> <header>header</header> <main>main content</main> </div> <footer>footer</footer></body>
CSS 設定:
html,body{height:100%;margin:0;padding:0;}.container{min-height:100%;}header{background-color: #ffe4c4;}main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}/* margin-top（负值的）高度等于footer的height值 */
このメソッドは、コンテナ内のフッターの前に要素を配置し、コンテナとフッターの並列構造を形成します。
まず、.container の高さを少なくとも画面全体を満たすように設定します。 >2 番目に、main (.container の最後の子要素) の padding-bottom 値をフッターの高さの値以上に設定します。
最後に、フッターの高さの値と負のマージンを設定します。 -トップ値。
このメソッドは絶対位置指定を使用しませんが、HTML 構造のセマンティクスはメソッド 1 の構造ほど明確ではありません。
.container に負の margin-bottom を設定することもできます。このとき、HTML 構造は次のように変更されます。
CSS 設定:
<body> <div class="container"> <header>header</header> <main>main content</main> <div class="empty"></div> </div> <footer>footer</footer></body>
空の div を使用すると、フッター コンテナーがページの下部に移動し、コンテナーの負の margin-bottom がフッターと .empty の高さに等しく設定されます。
html,body{height:100%;margin:0;padding:0;}.container{min-height:100%;margin-bottom:-100px;}.empty,footer{height:100px;} 余分な空の div があり、セマンティクスはあまり良くありませんが、メイン要素に padding-bottom を設定する以前の方法と比較すると、明らかな利点があります。メイン要素の境界線と背景色を設定する必要がある場合、padding-bottom は空白スペースを作成しますが、空の div を追加した後、レイアウト メソッドは .empty に基づいて動作します。 main の CSS を設定しても影響を受けません。これは利点です。
方法 3: 任意のフッターの高さ + js
HTML 構造:
CSS 設定:
<body> <header>header</header> <main>main content</main> <footer>footer</footer></body>
js コード:
html,body{margin:0;padding: 0;}header{background-color: #ffe4c4;}main{background-color: #bdb76b;}footer{background-color: #ffc0cb;}/* 动态为footer添加类fixed-bottom */.fixed-bottom {position: fixed;bottom: 0;width:100%;}
$(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); var contentHeight = document.body.scrollHeight,//网页正文全文高度 winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏 if(!(contentHeight > winHeight)){ //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom $("footer").addClass("fixed-bottom"); } else { $("footer").removeClass("fixed-bottom"); } } footerPosition(); $(window).resize(footerPosition);});