[解決済み] フッターの内容が重なっているのを修正するには?
2022-02-10 04:18:13
質問
同じような問題をここや他の場所で探し回ったのですが、決定的な答えが見つからないようです。フッターに届くくらいのテキストをページに追加すると、フッターが単にテキストに重なってしまいます。ブラウザのウィンドウサイズを小さくして、フッターとコンテンツを入れているコンテナを強制的に会わせた場合も同じです。この現象は、薄い灰色の部分であるコンテナが、常に100%の高さを占めているはずなのに、何らかの理由で縮小してしまうこともあります。
こんな感じで、徹夜続きなので、考えがまとまりません。しかし、私はプロのデザイナーではないので、何が問題なのかがわからないのです。
以下は、私のコードと、ページの関連部分をすべて使って作成したJSFiddleです。
html, body {
margin: 0;
padding: 0;
}
html, body {
background: #252525;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
text-align: center;
}
body {
background: #363636;
border-left: 1px solid #111;
border-right: 1px solid #111;
margin: 0 22.5%;
}
#container {
color: white;
margin-bottom: 2em;
min-height: 100%;
overflow: auto;
padding: 0 2em;
text-align: justify;
}
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: fixed;
font-size: small;
width:100%;
}
<body>
<div id="container">
<h1>A webpage</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
<p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
<div id="footer">This is a footer.</div>
</body>
以下は JSFiddleの例 .
解決方法は?
これを変更します。
#footer {
bottom: 0;
color: #707070;
height: 2em;
left: 0;
position: relative; //changed to relative from fixed also works if position is not there
font-size: small;
width:100%;
}
関連
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み] div要素間の空白を削除する方法
-
[解決済み] フォームの中にフォームがある、でいいのかな?[重複]
-
[解決済み] What is the difference between <p> and <div>?
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] TD rowspan が機能しない
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] text-overflow: 省略記号が機能しない
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] HTML CSS インビジブルボタン
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました
-
[解決済み] フロートされた子 div の高さを親の高さに拡張するにはどうすればよいですか?