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

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

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

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

CSS

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

Q&A

解決済

2回答

1057閲覧

フッターが移動してしまう

kasoku

総合スコア3

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/06/06 09:34

編集2023/06/06 09:45

フッターをページの一番下に固定させたいのですが、縮小するとフッターの下に余白が出来てしまいます
下に固定,フッターの下に余白が出来ないようにするにはどうすればいいのでしょうか?

html

1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Home</title> 7 <link rel="icon" href="logo.jpg" type="image/x-icon"> 8 <link rel="stylesheet" href="style.css"> 9 </head> 10 11 <body> 12 13 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 14 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 15 16 <div class="footer"> 17 <div class="container"> 18 <div> 19 &copy; 2023 P 20 </div> 21 <div class="clear"></div> 22 </div> 23 </div> 24 25 </body> 26</html>

css

1@charset "utf-8"; 2body { 3 background: #ff6969; 4} 5 6.container { 7 max-width: 980px; 8 padding: 0 30px; 9 margin-left: auto; 10 margin-right: auto; 11} 12 13.clear{ 14 clear: both; 15} 16 17* { 18 margin: 0; 19 padding: 0; 20} 21 22.footer { 23 line-height: 80px; 24 background-color: #333; 25 color: #ffffff; 26 text-align: center; 27 width: 100%; 28}

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

guest

回答2

1

自己解決

bodyに

css

1min-height: 100vh; 2display:flex; 3flex-direction:column;

textに

css

1flex: 1;

で解決しました😭

html

1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Home</title> 7 <link rel="icon" href="logo.jpg" type="image/x-icon"> 8 <link rel="stylesheet" href="style.css"> 9 </head> 10 11 <body> 12 13 <div class="text"> 14 <h1>HI.</h1> 15 </div> 16 17 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 18 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 19 20 <div class="footer"> 21 <div class="container"> 22 <div> 23 &copy; 2023 P 24 </div> 25 <div class="clear"></div> 26 </div> 27 </div> 28 29 </body> 30</html>

css

1@charset "utf-8"; 2body { 3 background: #ff6969; 4 min-height: 100vh; 5 display:flex; 6 flex-direction:column; 7 8} 9 10.text { 11 flex: 1; 12} 13 14.container { 15 max-width: 980px; 16 padding: 0 30px; 17 margin-left: auto; 18 margin-right: auto; 19} 20 21.clear{ 22 clear: both; 23} 24 25* { 26 margin: 0; 27 padding: 0; 28} 29 30.footer { 31 line-height: 80px; 32 background-color: #333; 33 color: #ffffff; 34 text-align: center; 35 width: 100%; 36}

投稿2023/06/06 10:47

kasoku

総合スコア3

Lhankor_Mhy👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

0

検索してみるといいと思います。
フッター 固定 CSS - Google 検索

投稿2023/06/06 09:56

Lhankor_Mhy

総合スコア34736

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.68%

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

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

質問する

同じタグがついた質問を見る

HTML

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

CSS

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