HTMLページフッターを最小の高さでページの下部に留め、ページと重ならないようにするCSS

379

次のページ（デッドリンク：）http://www.workingstorage.com/Sample.htmに、ページの下部に配置できないフッターがありました。

フッターにしたい

  • ページが短く、画面がいっぱいにならない場合は、ウィンドウの下部に固定します。
  • （コンテンツを重ねるのではなく）1画面以上のコンテンツがある場合は、ドキュメントの最後に留まり、通常どおり下に移動します。

CSSは継承され、私を困惑させます。コンテンツの高さを最小限にしたり、フッターを一番下にしたりするように適切に変更できないようです。

css  footer 
— キャベトロブ
ソース
16
これがこのような一般的な問題であることは驚くべきことです。おそらくCSS4では、「ナビゲーションバーを作成する」と「フッターを作成する」の実装が頻繁に試行されるため、これらの実装が見られます。
— 同型写像
1
CSS4は決してありません（CSS3は成長するだけです）。これはの実装で修正されると思いflexboxます。
— Marijke Luttekes 2014
1
これに関する優れた記事：css-tricks.com/couple-takes-sticky-footer
— Phil
— Lalit Baghel

回答:

345

簡単な方法は、体にすることです100%し、あなたのページのをmin-heightする100%、あまりにも。フッターの高さが変わらない場合、これは正常に機能します。

フッターに負のマージントップを指定します。

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— ジョン・ウィンスタンリー
ソース
27
これは、フッターの高さが事前にわかっている場合にのみ機能します。フッターには動的なコンテンツが含まれている場合や、フレームワークを構築している場合があります。高さ可変フッターのアイデアはありますか？
— コスタ
高さ可変フッターで機能するソリューションについては、@ Costaで私の答えをここで確認してください。
— Jose Rui Santos
動的コンテンツの場合、「高さ」を省略すればフッターはコンテンツに適応します。すべてのブラウザでテストされていません
— m47730 2015
これはbox-sizing: border-box;体に必要な場合があります[そして#container]。
— konsolebox 2016年
これは多くの奇妙なトリックのようです。以下に簡単でトリックを使用しない答えがあります。
— Andrew Koster 2018
165

私はフッターを下部に貼り付ける非常に簡単な方法を開発しましたが、最も一般的な方法として、フッターの高さに合わせて微調整する必要があります。

デモを見る

フレックスボックス方式：

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
スニペットを展開

以下のこの方法では、に::after擬似要素を配置して「トリック」を使用し、フッターの正確な高さにbody設定して、フッターとまったく同じスペースを占めるようにします。そのため、フッターがその上に配置されると、フッターが実際にスペースを占有しているように見え、その絶対的な配置の悪影響を排除します（たとえば、本文のコンテンツを超える）absolute

position:absolute メソッド：（動的フッターの高さは許可されていません）

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
スニペットを展開

テーブルレイアウト方法：

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
スニペットを展開

— vsync
ソース
シンプルでエレガントで、さらに重要なことはそれが機能することです。でdivの追加を開始すると、他のソリューションは失敗しますdisplay: table display: table-row display:table-cell。ただしbody {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}、スクロールバーを回避するために追加する必要があることがわかりました。あなたはこれを調整することでこれに応えることができますがbody:after height、私はpxではなくremで私のものを指定しているので問題になります。
— Steve Waring 2017年
3
@SteveWaring-ありがとう。この回答は非常に古いため、更新されました。今、私は使用することに賛成ですflexbox
— vsync
1
「基本的な共通マークアップ」のCSSには小さなエラーがあり、機能しませんでした（エラーはリンクされた「デモ」には存在しませんでしたが、問題ありません）。私はそれを修正する自由を取りました。
— sleske 2018
3
ありがとうございました！フレックスボックスソリューションは実際にはシンプルで、ハックや奇妙な固定サイズや固定位置を使用しません。
— Andrew Koster 2018
1
このデモは機能する唯一のものです！素晴らしい、ありがとう！
— Drakinite、
51

優れたクロスブラウザで機能する非常にシンプルなアプローチは次のとおりです。

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
スニペットを展開

— タマスパップ
ソース
34

これを使用してフッターを下に貼り付けましたが、うまくいきました。

HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

これがHTMLで行う必要がある唯一の変更です。divこれを"allButFooter"クラスに追加します。私はそれをすべてのページで行いました。短いページ、フッターが下にくっつかないこと、そしてスクロールしなければならないことをすでに知っているほど長いページを知っていました。これを行ったので、ページのコンテンツが動的な場合でも問題なく動作することがわかりました。

CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

"allButFooter"クラスがありmin-height、ビューポートの高さに依存する値（100vh私はすでに知っていたことを、ビューポートの高さの100％を意味する）とフッターの高さを40px。

それが私がしたことのすべてであり、それは私にとって完璧に機能しました。私はすべてのブラウザで試したわけではなく、Firefox、Chrome、Edgeだけを試してみました。結果は思い通りでした。フッターは下にくっついており、z-index、位置、その他のプロパティを変更する必要はありません。ドキュメント内のすべての要素の位置はデフォルトの位置でした。絶対位置や固定位置などに変更しませんでした。

レスポンシブデザインの操作

解決したいことがあります。高さが40pxの同じフッターを使用したこのソリューションは、を使用してレスポンシブデザインで作業していたときに期待どおりに機能しませんでしたTwitter-Bootstrap。関数で減算していた値を変更する必要がありました。

.allButFooter {
    min-height: calc(100vh - 95px); 
}

これはおそらくTwitter-Bootstrap、独自のマージンとパディングが付いているためです。そのため、その値を調整する必要がありました。

これが皆さんの役に立つことを願っています！少なくとも、試してみるのは簡単な解決策であり、ドキュメント全体に大きな変更を加える必要はありません。

— N.ラリュー
ソース
私はこの問題に対するあらゆる種類の解決策で問題に直面しています。このソリューションは、display: noneThanks を使用して本文に表示される内容を変える私のページで機能します。それも素晴らしくてシンプルです。
— Steve Waring 2017
何時間もの解決策を試みた後、2つだけがnlを機能させました。position: fixed; bottom: 0そしてこれ。フッターが下部に固定されず、スクロール可能なページの最後に留まるため、このソリューションが最適です。
— Hmerman6006
あなたの答えに基づいて、あなたはそれを別の方法で見ることができます.footer {max-height: calc(100vh+40px); position: absolute}。それも機能するので、あなたはちょうどあなたの体のサイズを知っている必要があります。
— Hmerman6006
29

IE7以降では、簡単に使用できます

#footer {
    position:fixed;
    bottom:0;
}

サポートについては、caniuseを参照してください。

— リアム
ソース
77
フッターを超えるコンテンツがある場合、フッターを下部に表示したくない。足りない場合はフッターを下に貼り付け、画面が1つ以上ある場合は通常どおり下に拡張します。スティッキーフッターはこれを解決しました。
— Caveatrob 2013
@Caveatrob：私は誤解を避けるために、この重要な情報を編集する自由をあなたの質問に取り入れました（将来の読者にとって、あなたはおそらくこれまでにこれを解決しました:-)）。
— sleske
このソリューションは、すべてのページにフッターを印刷する唯一のソリューションであり、とても簡単です。しかし、コンテンツがメインコンテンツと重複していないことを確認することはできません。誰かがこれに対する解決策を手に入れましたか？
— ハッツェン
15

私が使用するシンプルなソリューションはIE8 +で動作します

HTMLにmin-height：100％を指定して、コンテンツが少ない場合、ページがビューポートの高さ全体になり、ページの下部にフッタースティックが表示されるようにします。コンテンツが増えると、フッターはコンテンツとともに下に移動し、一番下に固執し続けます。

JSフィドル作業デモ：http : //jsfiddle.net/3L3h64qo/2/

CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— サンジーブ
ソース
it good..but just Update .pageContentWrapper {padding-bottom：100px; / * Height of footer * /}
— Subodh Sharma
どうもありがとう。Angular 7に取り組んでいます
— Carlos Torres
可能な限り不要なスクロールバーを作りたくありません。
— КонстантинВан
14

しかし、別の本当に簡単な解決策はこれです：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

秘訣はdisplay:table、ドキュメント全体とフッターにdisplay:table-rowwith を使用することですheight:0。

フッターはと表示される唯一の本文の子でtable-rowあるため、ページの下部に表示されます。

— ホセ・ルイ・サントス
ソース
私は、CSSのテーブルを愛し、彼らはかなり奇妙ですラインの下の問題を作成します。stackoverflow.com/questions/24898115/...
— コスタ
1
このソリューションは完全に機能していないようです-Firefoxはフッターの高さ0を無視します。代わりに高さ1pxまたは1％を使用しました。エッジ、IE11、ChromeとモバイルSafariは0に満足している
— Kitet
私はこのソリューションが大好きです。しかし、このようにレイアウトを構築すると、ブラウザでの子要素の計算が無効になります。ページの上部にコンテナーがありheight: 100%、ビューポートの比率が1/1（正方形）の場合、コンテナーは実際には100％でなければならないとします。ビューポートが広くなる（横向き）場合、高さは100％を超え、狭くなる（縦向き）場合、100％未満になります。したがって、高さはウィンドウの幅に比例します。別のラッパーでそれを解決しようとしましたが、これは機能しませんでした。誰かが解決策を得たか、少なくともヒントを得ましたか???
— アクセル
@Axelこのバージョンでは、ビューポートの幅に関係なく、すべての高さ（フッターの高さを差し引いたもの）を占める100％の高さの青いdivを上に追加しました。私はあなたが他のCSSを台無しにしているかもしれないと思います。私の元のjsFiddleに基づいて問題の最小化バージョンを作成してみてください
— Jose Rui Santos
@JoseRuiSantos ご
— Axel
8

固定された高さや要素の位置の変化を想定しない非常にシンプルなフレックスソリューション。

HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

ブラウザのサポート

IE11以下を除くすべての主要なブラウザー。

適切なプレフィックスには必ずAutoprefixerを使用してください。

コードスニペットを表示

— m.spyratos
ソース
魅力のように働いた！下部の4kフッタースティックを超える解像度でも
— Arpan Banerjee
7

モバイルデバイスは、ビューポートの概念を「通常とは異なる」方法で実装しているため、注意が必要です。

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

したがって、position: fixed;（他の場所で推奨されているように）を使用することは、通常、進むべき道ではありません。もちろん、それはあなたがしている正確な行動に依存します。

私が使用したもの、およびデスクトップとモバイルでうまく機能したものは、次のとおりです。

<body>
    <div id="footer"></div>
</body>

と

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— ベン・ジャクソン
ソース
6

これを行う

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

また、最新のすべてのブラウザでサポートされているflexについても読むことができます。

アップデート：私はフレックスについて読んで、それを試してみました。それは私のために働いた。それはあなたのために同じことを願っています。ここに私が実装した方法があります。ここでメインはIDではなく、divです

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

ここでflexの詳細について読むことができますhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

古いバージョンのIEではサポートされていないことに注意してください。

— アース・タンデル
ソース
1
これが実際の最良の答えです。flex-grow: 1フッターの上に何かを使用すると、フッターが適切に下部に保持されます。
— iBug
5

私はここで同様の質問に答えました：

固定ヘッダーがあるページの下部にフッターを配置します

私はウェブ開発にかなり慣れており、すでに回答済みであることは知っていますが、これは私が解決する最も簡単な方法であり、どういうわけか違うと思います。私のWebアプリのフッターには動的な高さがあり、FlexBoxとスペーサーを使用することになるため、柔軟なものを望みました。

  1. まず、HTMLと本文の高さを設定します
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

columnヘッダー、ヒーロー、または垂直方向に配置されたコンテンツを追加する必要がある場合に備えて、アプリの動作を想定しています。

  1. スペーサークラスを作成する
.spacer {
    flex: 1; 
}
  1. したがって、後でHTMLは次のようになります 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

ここでプレイできます https://codepen.io/anon/pen/xmGZQL

— カモ
ソース
5

これは、スティッキーフッターと呼ばれています。それをグーグルで検索すると、たくさんの結果が出てきます。CSSスティッキーフッターは、私がうまく使用したものです。しかし、もっとあります。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
スニペットを展開

このコードのソース

— パオロベルガンティーノ
ソース
3

私のjqueryメソッドでは、ページコンテンツがウィンドウの高さよりも小さい場合はページの下部にフッターを配置し、そうでない場合はコンテンツの後にフッターを配置します。

また、他のコードの前にコードを独自のエンクロージャーに保持すると、フッターの再配置にかかる時間が短縮されます。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— サム・ジョーンズ
ソース
3

私自身もこの問題を調査してきました。私はかなりの数の解決策を見てきましたが、それぞれに問題があり、多くの場合、いくつかのマジックナンバーが関係しています。

そこで、さまざまなソースからのベストプラクティスを使用して、このソリューションを思い付きました。

http://jsfiddle.net/vfSM3/248/

ここで特に達成したかったのは、メインコンテンツをフッターとヘッダーの間で緑色の領域内にスクロールさせることでした。

ここに簡単なCSSがあります：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— フサイット
ソース
3
このように設計されたサイトは嫌いです。同時に読むことができるテキストの量を制限したいのはなぜですか？ヘッダーとフッターを常に表示する必要はありません。必要なときにどこにあるかを知っています。
— Tarmil 2013年
1
見てい@Tarmil numerics.infoを。これがいつ役立つか、今わかりますか？
— husayt 2014年
3

これは私が同じ問題を解決した方法です

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
スニペットを展開

— ネムス
ソース
2

フッターセクションをカスタマイズするだけ

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— rashedcs
ソース
機能していません。非常に大きなページがあっても、常に下にくっつきます。すべてのページでスクロールすることはできませんが、下にくっつくだけです。
— fWd82 2019
動作しません。コンテンツの上にフッターが表示されます。
— indolentdeveloper
1

これが私の2セントです。他のソリューションと比較して、コンテナを追加する必要はありません。そのため、このソリューションはもう少しエレガントです。コード例の下に、これが機能する理由を説明します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

したがって、最初に行うことは、最大のコンテナ（html）を100％にすることです。HTMLページはページ自体と同じ大きさです。次に、ボディの高さを設定します。これは、htmlタグの100％よりも大きくすることができますが、少なくとも同じ高さにする必要があるため、min-height 100％を使用します。

私たちはまた、身体を親族にします。相対とは、ブロック要素を元の位置から相対的に移動できることを意味します。ただし、ここでは使用しません。親戚には2番目の用途があるからです。絶対要素は、ルート（html）または最初の相対親/祖父母に対して絶対です。それは私たちが望むことです、私たちはフッターが体、つまり下部に対して絶対的であることを望みます。

最後のステップは、フッターをabsoluteおよびbottom：0に設定することです。これにより、フッターが最初の親/祖父母（相対）の下部に移動します（body ofcourse）。

まだ修正すべき問題が1つあります。ページ全体を埋めると、コンテンツがフッターの下に表示されます。どうして？それは、フッターが「htmlフロー」内にないためです。では、これをどのように修正すればよいでしょうか？ボディにpadding-bottomを追加します。これにより、ボディがコンテンツよりも実際に大きくなります。

私は皆さんのために多くのことを明確にしたと思います。

— デビッド
ソース
1

jQueryを使用した動的なワンライナー

私が遭遇したすべてのCSSメソッドは厳しすぎる。また、フッターをに設定することfixedは、それがデザインの一部でない場合、オプションではありません。

テスト済み：

  • クロム：60
  • FF：54
  • IE：11

このレイアウトを想定：

<html>

<body>
  <div id="content"></div>
  <div id="footer"></div>
</body>

</html>

次のjQuery関数を使用します。

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

何が設定されているmin-heightため#contentに、ウィンドウの高さ - フッタの高さ、これまでそれは一度かもしれないものを。

を使用したためmin-height、#content高さがウィンドウの高さを超える場合、関数は適切に低下し、必要がないため何も影響しません。

実際に見てください：

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
スニペットを展開

JsFiddleの同じスニペット

ボーナス：

これをさらに進め、この関数を動的ビューアの高さのサイズ変更に適合させることができます。

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
スニペットを展開

— 私はコーデを持っています
ソース
0

html、body、およびフッターを除く他の行を100％に設定するだけです。例えば

<body>
<header></header>
<content></content>
<footer></footer>

CSSは 

html, body, header, content{
height:100%;
}
— オラタンデG.
ソース
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— サンジャイジー
ソース
0

そのことについて何：

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— novecentonove
ソース
このコードは質問に答えることがありますが、このコードが質問に答える理由や方法に関する追加のコンテキストを提供すると、長期的な価値が向上します。
— β.εηοιτ.βε
-1

私は多くのプロジェクトで使用しており、単一の問題を受け取ったことはありません:)

参考までに、コードはスニペットにあります 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
スニペットを展開

— サントシュ・カルセ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.