page_html/css_WEB-ITnose の下部にあるフッターを修正する方法-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

page_html/css_WEB-ITnose の下部にあるフッターを修正する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:56 AM

方法 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);});

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles