teratail header banner
teratail header banner
質問するログイン新規登録
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

2回答

596閲覧

footerの下部の余白がどうしても消えないです。

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2022/10/12 09:10

0

0

概要
付属画像のようにフッターの下に余白が出来てしまいます。
スクロールして下まで進まないと余白があるかどうかみることが出来ないかもしれません。

何故かたまにですが、数回に1回ですが、同じページを開くと、フッターの下に余白が出来ない時もあります。

付属画像
イメージ説明
実際のサイトのURL
https://rensyuu12.tokyo/PHPMailer/footer.html

試したこと。
50reset.cssのbodyとfooterにmargin0を追加してみても変化がありません。
また、footerを固定して、高さをページ全体に指定しています。

先に進めず困っています。原因は何でしょうか?
回答よろしくお願いいたします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="stylesheet" href="50reset.css"><!--リセットCSS--> 7<link rel="stylesheet" href="fff.css"><!--フッター等のCSS--> 8 9<title></title> 10 <style> 11</style> 12</head> 13<body> 14<div class="wrapper"> 15 16<footer> 17 <small><a href="" class="sss10"><span>プライバシーポリシー </span></a> <a class="sss11"><span>Copyright &#169; 2021 Inc.All Right Reserved.</span></a></small> 18</footer> 19 20</div> 21<!--overflow:hidden div--> 22</body> 23</html>

◎フッター等のCSS
fff

css

1* 画面幅(2000px以下の時までの適応)指定 */ 2@media screen and (max-width: 2000px){ 3 4 /* fotterタグの手前までdiv */ 5 6.wrapper{ 7 overflow: hidden; 8 } 9 10 11 12/* footerのスタイルと英語の文字のスタイルなど */ 13footer { 14 15 padding: 2px; 16 background-color: rgb(7, 206, 0); 17 color: white; 18 font-size: 12px; 19 20 width:100%; 21 height: 14px;/* wrpperのpadding-bottom:と同じ値 */ 22 23 24 25 text-align: center; 26 bottom: 0; /*下に固定*/ 27 position: absolute;/*←絶対位置*/ 28 } 29 30 31 32 /* footerの下の白い余白を無くすための処置 &1とする */ 33 /* &1 */ 34 .wrapper{ 35 min-height: 100%;/* ページ全体の高さを指定 */ 36 position: relative;/*←相対位置*/ 37 padding-bottom: 14px;/*←footerの高さ*/ 38 box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ 39 } 40 41} 42

リセットCSS
◎50resetcss

css

1html, body { 2 height: 100%; 3} 4 5 6/*フッターのみpadding0; margin:0;を適応しない */ 7footer{ 8 9 10 11 margin:0; 12 padding:0; 13 border:0; 14 outline:0; 15 font-size:100%; 16 vertical-align:baseline; 17 18 19} 20 21body { 22 line-height:1; 23 margin: 0; 24}

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

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

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

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

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

Cocode

2022/10/12 09:38

最後までスクロールし、さらに無理やりスクロールを進めたら一瞬余白が見える(スクロールをやめたら余白がなくなる)のは、ブラウザの仕様ですが、そういうことではなくてでしょうか><?
klgrhl

2022/10/12 10:43

回答ありがとうございます。無理やり下にスクロールしなくても、見えることがあるようです。隙間だと思うのですが? ただ隙間がでない時もあるようです。 body全体に背景色を追加すると、フッターの下部に背景色が見えるのですが、これは隙間ではないのでしょうか?
ghtew2

2022/10/12 10:45

klgrhlさん補足ありがとうございます。これは隙間ではないのでしょうか?
ghtew2

2022/10/12 10:47

これは隙間ではないのでしょうか?相当目立ちます。
ayuayuayu

2022/10/18 08:33

何回も開いてみましたが余白はありませんでした
ghtew2

2022/10/18 09:17

回答ありがとうございます。おそらくブラウザの仕様なのだと思います。
guest

回答2

0

ありがとうございました。

投稿2022/10/19 08:11

ghtew2

総合スコア245

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

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

0

自己解決

ありがとうございました。

投稿2022/10/19 08:11

ghtew2

総合スコア245

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問