フッター下の余白 レスポンシブ

Question

PCではfooterの下には余白はありませんでしたが、スマホで見ると余白があったので、余白を消したいです

###構成
・headerからfooterまではスクロールしなければ見れない
・contentの高さ指定は無し　子要素の高さの合計がcontentの高さ状態
・スクロール無しではfooterの途中までしか表示されない

<div class="content">
  <div class="header">
  </div>

  <div class="main">
  </div>

  <div class="footer">
  </div>
</div>

.header {
  height: 350px
}

.main {
  height: 400px
}

.footer {
  heightの指定は行なっていないが、子要素のmargin-topやmargin-bottmなどで高さがある状態
  子要素にもheightの指定は無し
}

###問題
余白を削除するために以下のようにすると

.content {
  height: 100%
  position: relative
}

.footer {
  position: absolute
  bottom: 0
  height: 300px
}

PCではfooterがmainの上に被さるようになります
スマホだと被さりません

恐らくheight100%にしたため、contentの高さがfooterの途中まで(スクロールしないで表示できる高さ)になったため、その高さを基準にしてbottom0をしてしまった結果だと思います。
余白を消すためにはheight100%をしなければならない認識でいますが、うまく余白を削除する方法をご教授願いたいです。

Answer 1

様々な方法があるかと思いますので、これは一例です。

.header {
  height: 350px
}

.main {
  height: calc(100% - 650px)
}

.footer {
  height: 300px
}

如何でしょうか？

Comments

[Meitoku]

ありがとうございます！

[tomtomtomtom]

ご解決おめでとうございます^^
また機会がありましたら宜しくお願い致します。