重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

【HTML&CSS】フッター下部の余白を無くす方法 スマホ版

解決済

  • 質問者：零礼
  • 質問日時：
  • 回答数：1件

首記の件、下記ソースコードを参考に作成することができました。

URL;
https://qiita.com/kents1002/items/0fbd3bb2b30b57 …

<html>
<body>
<div class="wrapper">
<header>ヘッダー</header>
<div class="inner">中身</div>
<footer>フッター</footer>
</div>
</body>
</html>
html,body{
height:100%;
}

.wrapper{
width: 100%;
position: relative;
min-height: 100%;
}

.inner{
padding-bottom:200px; /*フッターの高さと同じにする*/
}

footer{
height:200px;
position:absolute;
bottom:0;
}


PCだと何の問題もなくできたのですが、メディアクエリでスマホ版も同様に行ったのですがフッターの下に余白が出来てしまいます。

スマホ版でフッターの下に余白をできないようにするにはどうすればいいか教えて頂きたくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

メディアクエリでスマホ版やって見ましたが、上手く行きますよ。



footerにbackground-colorで色を付け、各区画に色違いのborder設定して色々試す事をおすすめします。

念のため、.wrapper内にoverflow: hidden;を入れてみたら。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

色々と要素を調べてみたら出来ました。
ありがとうございます。

通報する
お礼日時：2020/10/27 09:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報