HTMLページフッターを最小の高さでページの下部にとどまらせるが、ページと重ならないようにするCSS
Css Make Html Page Footer Stay Bottom Page With Minimum Height
解決：
簡単な方法は体を作ることですページの100％、最小の高さ100％も。フッターの高さが変わらなければ、これは問題なく機能します。
フッターに負のマージンを与えます-トップ：
フッター{クリア：両方;位置：相対;高さ：200px;マージントップ：-200px; }
以下は私の4つの異なる方法です：
各例では、テキストは自由に編集可能で、さまざまなシナリオでコンテンツがどのようにレンダリングされるかを示しています。
1）フレックスボックス
body {height：100vh;マージン：0; }ヘッダー{min-height：50px;背景：lightcyan; }フッター{min-height：50px;背景：PapayaWhip; } / *トリック* / body {display：flex; flex-direction：column; }フッター{margin-top：auto; }ヘッダーコンテンツフッター
2）グリッド
body {min-height：100vh;マージン：0;表示：グリッド; grid-template-rows：auto 1fr auto; }ヘッダー{min-height：50px;背景：lightcyan; }フッター{min-height：50px;背景：PapayaWhip; }ヘッダーコンテンツフッター
以下のこのメソッドは、を配置することによって「トリック」を使用します::の疑似要素の後ボディ、そしてそれを持っているように設定します ちょうど フッターの高さ。フッターとまったく同じスペースを占めるため、フッターがその上に絶対配置すると、フッターが実際にスペースを占有しているように見え、絶対配置の悪影響を排除します（たとえば、体の内容を超える）
3）位置：絶対（いいえ 動的 フッターの高さ）
body {min-height：100vh;マージン：0;位置：相対; }ヘッダー{min-height：50px;背景：lightcyan; }フッター{背景：PapayaWhip; } / *トリック：* / body {position：relative; } body :: after {content： '';表示ブロック;高さ：50px; / *フッターの高さと同じに設定* /}フッター{位置：絶対;下：0;幅：100％;高さ：50px; }ヘッダーコンテンツフッター
4）テーブルレイアウト
html {高さ：100％; }本体{最小-高さ：100％;マージン：0; }ヘッダー{高さ：50px;背景：lightcyan; }記事{高さ：1％; }フッター{高さ：50px;背景：PapayaWhip; } / ****トリック：**** / body {display：table;幅：100％; }本体>フッター{表示：テーブル行; }ヘッダーコンテンツフッター
優れたクロスブラウザで機能する非常に単純なアプローチは次のとおりです。
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
html、body {margin：0;パディング：0;高さ：100％; } #container {min-height：100％;位置：相対; } #header {background：＃ff0;パディング：10px; } #body {padding：10px; padding-bottom：60px; / *フッターの高さ* /} #footer {position：absolute;下：0;幅：100％;高さ：60px; / *フッターの高さ* / background：＃6cf; }ヘッダー本体フッター