web-dev-qa-db-ja.com

フッターの下の空白を削除します

フッターの下には常に大きな空白があります。ページがフッターの最後で終了するようにするにはどうすればよいですか？

Example

htmlcssfooterremoving-whitespace
15
lagertha281

この問題には3つの解決策があります

以下のすべての例では、ヘッダー、コンテンツ、フッターの3つのdivのみを使用して、非常に基本的なHTMLテンプレートを作成しました。すべてのオプションは縮小されていますが、より高度なWebサイトでは正常に機能するはずです。

  1. 背景色を使用

本文とフッターの両方に同じ背景色を設定します。

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
  background-color: red;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  background: gray;
  height: 200px;
}
#footer {
  height: 20px;
  background: red; /*Same as body, you could also use transparent */
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
  1. スティッキーフッターを使用

ブラウザウィンドウの下部に固定されているスティッキーフッターを使用します。 （多くのユーザーはスティッキーフッターを好まないため、このオプションはお勧めしません。ただし、スティッキーヘッダーを使用できます）

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  height: 2000px;
}
#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 20px;
  background: #222;
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
  1. コンテンツに最小高さを使用

ブラウザーウィンドウの高さからヘッダーとフッターの高さを引いた値に等しいコンテンツdivの最小高さを設定します。 （これはクロスブラウザで動作し、すべての画面で応答するため、私の個人的なお気に入りです）

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  min-height: calc(100vh - 40px);
}
#footer {
  height: 20px;
  background: #222;
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
17
Berendschot

これを実現する最も簡単な方法は、次のようにフッターの上のコンテンツにmin-heightを設定することです。

HTML：

<body>
    <section>
        This is content of the page
    </section>
    <footer>
        Text of footer
    </footer>
</body>

CSS：

section {
    min-height: 100vh; /* minus the height of the footer */
}

jsfiddleリンク： https://jsfiddle.net/x55xh3v7/

しかし、より最適化されたソリューションは sticky footer techique です。これにより、フッターがページから不要に流出するのを防ぎます。

8
cuddlecheek

これもこのようにできます

#main{
  border:solid;
  height:100vh;
}
#footer{
  border:solid;
}
<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>
5
repzero

これを修正するには、javascriptを使用することをお勧めします。次のようなものです。

if($(window).height() > $("body").height()){
   $("footer").css("position", "fixed");
} else {
   $("footer").css("position", "static");
}
1
Ryan