質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

6785閲覧

Footerを画面の1番下に配置したいが固定したくない

kaitotokai

総合スコア59

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/06/26 07:32

Footerを画面の1番下に配置したいが固定したくないです。

<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <style> body , html { height: 100%; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; background-color: yellow; } #contents { padding-bottom: 100px; background-color: blue; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; background-color: red; } </style> </head> <body> <div id="container"> <div id="header">ヘッダー</div> <div id="contents">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>

とコードを書きました。

今の状態で実行すると、コンテンツの要素がどんなに増えてもフッターが常に画面に表示されます。
フッターを常に画面に表示はせず、一番下にスクロールした時のみフッターを表示させたいです。その時フッターは画面の一番下にぴったり配置させたいです。

position: fixed; 

がその役割をしているとは思うのですが、これをつけるとフッターが固定されてしまいます。

どのようにcssを書き換えれば目的の画面が得られますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

こういうことですかね。

css

1 2body , html { 3 padding:0; /* 追加*/ 4 margin:0; /* 追加*/ 5 height: 100%; 6} 7 8/*中略*/ 9 10#footer { 11 position: absolute; /* 変更*/ 12 bottom: 0; 13 width: 100%; 14 height: 100px; 15 background-color: red; 16}

コンテンツ少ないとき
コンテンツ少ないとき

コンテンツ多いとき
イメージ説明

投稿2018/06/26 07:51

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

position等使わずとも、普通にコーディングしていれば最後の要素は最後に表示されるはずですが、、
コンテンツの高さが少ない時に、footerの下に余白ができてしまうことを回避したいのでしょうか?

footerのheightが100pxで固定であれば

lang

1 2#container { 3 width: 100%; 4 position: relative; 5 height: auto !important; 6 height: 100%; 7 min-height: 100%; 8 background-color: yellow; 9 padding-bottom: 100px; /*ここを追加*/ 10} 11 12#contents { 13 /*padding-bottom: 100px;*/ /*ここを削除*/ 14 background-color: blue; 15} 16 17#footer { 18 position: absolute; /*ここを変更*/ 19 bottom: 0; 20 width: 100%; 21 height: 100px; 22 background-color: red; 23} 24

でどうでしょうか?

投稿2018/06/26 08:05

編集2018/06/26 08:07
unorigino

総合スコア128

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問