表示方法について質問をさせてください。
現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分(ページ最下部)の表示項目を、必ずページの一番下に表示させたいのです・・・。
しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。
コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。
そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。
サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。
これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか?
ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。
No.4ベストアンサー
- 回答日時:
>今回のこの手法はポイントとしては・・合ってますでしょうか?
相対値の中の絶対値を指定する(分かり難くてすいません。)ことで画面最下部へ持ってきています。
positionについては代表的なものを挙げると、
position:relative;←相対
position:absolute;←絶対
※z-index←重なり順(ブラウザによって解釈の違い有)
などがあります。
また、
position:fixed;bottom:0;
などを使って固定してしまう方法もあります。
今回のようなフッターの位置指定については多くのサイトが
いろいろ例などを挙げているので参考にして試してみてください。
>その際に、このpositionを使った・・などはありませんでしょうか?
positionに限らずですが、ブラウザによってはいろいろと不具合があります。
とくにIEは大変です。「CSSハック」などを覚えておくと対応できると思います。
No.3
- 回答日時:
こんにちは。
こんな感じでどうでしょう。
【CSS】
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#header {
background-color: #aaa;
height: 80px;
}
#container {
width: 100%;
background: #fff;
position: relative;
height: 100%;
min-height: 100%;
}
body > #container {
height: auto;
}
#contents {
padding-bottom: 50px;
}
#footer {
width: 100%;
background: #aaa;
position: absolute;
bottom: 0;
height: 50px;
}
#footer p {
padding: 0;
line-height: 50px;
}
【HTML】
<div id="container">
<div id="contents">
<div id="header">
<h1>ヘッダー</h1>
</div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>
<div id="footer"><p>フッター</p></div>
</div>
ありがとう御座います!!
こちらも試してみたところ実現することが出来ました。
この方法は、とても簡単ですね。
ちなみに、追加で質問してもいいでしょうか?^^;
今回のこの手法はポイントとしては
position: absolute;
bottom: 0;
だと思うのですが、合ってますでしょうか?
その際に、このpositionを使った定義で何か不具合など起こったことなどはありませんでしょうか?
特に内容であれば、とても簡単な定義に思うのですが、あまりpositionでの定義を行った経験が無くご質問させていただきました。
もし、可能であればで結構ですのでよろしくお願いします。
No.2
- 回答日時:
ありがとう御座います。
ネガティブマージンをとってbothするのですね、
なるほどです大変勉強になりました!
ちょっと難しい・・・というか理解するのに時間が掛かりましたが
こういった方法もあるのですね。ありがとう御座いました。
No.1
- 回答日時:
CSSで位置指定するか、テーブルでスペースを確保してしまうのではダメでしょうか?
もっとちゃんとやるならば、javaなどを使って閲覧者のブラウザと画面サイズを取得し、それを元にレイアウトを動的に変更する手だと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
- Chrome(クローム) Chromeで印刷する時、フッターのみ印刷したい 1 2022/04/09 15:06
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- WordPress(ワードプレス) ワードプレスにバグのような不具合が発生しました。 2 2023/03/23 07:51
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- Gmail Gメールの受信トレイの表示が変わって、戸惑っています 1 2023/04/04 17:52
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
css固定したフッターが本文と重...
-
フッター上部に謎の隙間
-
ヘッダとフッタが固定でコンテ...
-
Flickity で画像にリンクを貼る...
-
オープニングにアニメーション...
-
フッターの下に隙間ができてしまう
-
【CSS】floatで左右に並べた...
-
大分類・中分類・小分類
-
【コーディング】途中から位置...
-
画像の特定の座標にカーソルが...
-
IE6のレイアウト崩れ
-
HTML CSS 文字化け
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
CSS 可変マージン
-
ワードプレスでレイアウトが崩...
-
スタイルシートで画面を上下に...
-
このタグはグラデーションです...
-
ラジオボタンで段階評価
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
Ctrl+F(検索)の窓を出したいの...
-
チェックボックスの背景色って...
-
Webサイト作成 プログレスバー ...
-
離れた場所にマウスオーバーで...
-
スタイルシートで画面を上下に...
-
メニューバーもスクロールに合...
-
ホームページのsidebar とconte...
-
CSSで背景を下までのばすには?
-
かなり困っています。知恵を貸...
-
TABLEの高さを固定したいのですが…
おすすめ情報