コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

フッターの位置_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:08:18
オリジナル
1111 人が閲覧しました

ページのコンテンツの高さが十分ではないが、フッターをページの下部に配置したい場合があります。良い解決策を見つけたので共有したいと思います。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <style type="text/css">        *        {            margin: 0px;            padding: 0px;        }        html, body        {            height: 100%;        }    </style></head><body>    <div style="width: 100%; margin-bottom: -100px; background: #aa8; min-height: 100%;height: auto !important; height: 100%;">        <h1>Hello World</h1>        <div id="push" style="height: 100px;"></div>    </div>    <div id="footer" style="height: 100px; width: 100%; background: #fff;">        this is the footer    </div></body></html>
ログイン後にコピー


ディスカッションに返信（解決策）

オリジナル CSS スタイル 

        /* sticky footer------------------------------*/* {	margin: 0;}html, body {	height: 100%;}	.wrapper {	min-height: 100%;	height: auto !important;	height: 100%;	margin: 0 auto -267px; /* the bottom margin is the negative value of the footer's height */}.footer, .push {	height: 267px; /* .push must be the same height as .footer */}
ログイン後にコピー

共有をサポート

共有してくれてありがとう

共有は素晴らしいです!

共有をサポートします!!

関連ラベル：
页脚位置
ソース：php.cn
前の記事：css_html/css_WEB-ITnose でのテキストの色の設定に関する問題 次の記事：初心者は IE6 レイヤーの重複の問題を抱えています。_html/css_WEB-ITnose を教えてください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
モバイル ビューで、ユーザーがリンクをクリックしたときにこのナビゲーション バーを閉じるにはどうすればよいですか? ユーザーがリンクをクリックして Web サイトを閲覧すると、ナビゲーション バーが閉じませんか?ナビゲーション バーを閉じるために、クリック イベント リスナーを各リンクに追加しよ...
から 2024-04-06 19:23:03
0
1
411
Laravel 8 - /{editable_text} ルートを /{user} ルートにリダイレクトする方法 ユーザープロファイルに誘導するリダイレクトルートを作成しようとしています。リダイレクト ルートはユーザー データベースからの文字列/テキストである必要があり、同じユーザー プロファ...
から 2024-04-06 17:26:11
0
1
410
内部クエリに Eloquent を使用する 画像アドレスには、場所とユーザーの総数が含まれています。 Users::with(['address'=>function($query){$query->where(...
から 2024-04-06 16:45:50
0
1
515
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート