web-dev-qa-db-ja.com

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

私は次のページ（deadlink：http://www.workingstorage.com/Sample.htm）にフッターがあり、それをページの下部に表示できません。

フッターにしたい

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

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

cssfooter
285
Caveatrob

簡単な方法はあなたのページの本文を100%に、min-heightを100%にすることです。フッターの高さが変わらない場合はこれでうまくいきます。

フッターにマイナスのマージントップを設定します。

#footer {
    clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}
311
Jon Winstanley

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

デモを見る

以下のこのメソッドは、bodyに::after疑似要素を置き、フッターの高さが exact になるように設定して、フッターとまったく同じスペースを占有するようにします。フッタがその上にabsolute配置されると、フッタが実際にスペースを取っているように見え、絶対配置の悪影響を排除します（たとえば、本文の内容の上に移動するなど）。

HTML（基本共通マークアップ）

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:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<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>
66
vsync

ブラウザ間でうまく機能する非常に単純な方法は、次のとおりです。

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

HTML

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

CSS

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;
}
38
Tamás Pap

IE7以降では、単に使用することができます

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

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

31
Liam

私が使っている簡単な解決策は、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>
16
Sanjeev

それでも、もう1つの非常に単純な解決策はこれです。

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

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

jsFiddle

コツは、文書全体にdisplay:tableを、フッターにdisplay:table-rowを付けてheight:0を使用することです。

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

8
Jose Rui Santos

注意が必要なことの1つは、モバイルデバイスです。ビューポートのアイデアを「珍しい」方法で実装しているからです。

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;
}
7
Ben Jackson

これを行う

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

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

更新 ：私はflexについて読んでそれを試しました。それは私のために働きました。それがあなたのために同じことを願っています。これが私がどのように実装したかです。ここでのメインはそれがdivであるIDではありません

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ではサポートされていないことに注意してください。

5
Aarth Tandel

これはスティッキーフッターとして知られています。 グーグル検索 それは多くの結果を生み出します。 CSSスティッキーフッター は私がうまく使ったものです。しかし、もっとあります。

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： 

<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>

このコードのソース

4
Paolo Bergantino

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

また、他のコードの前にコードを独自のEnclosureに格納すると、フッターの位置を変更するのにかかる時間が短縮されます。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
4
Sam Jones

私は自分自身でこの問題を調べてきました。私はかなりの数の解決策を見てきましたが、それぞれに問題がありました。

だから私はこのソリューションを思い付いたさまざまなソースからのベストプラクティスを使用して：

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
husayt

私はちょうどここで同様の質問として答えました：

固定ヘッダを持つページの一番下にフッターを配置する

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

  1. Htmlとbodyの高さを設定することから始めます
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

3
Camo

これが私の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に設定することです。これは、相対的な最初の親/祖父母の親の下に移動します（コースオブコース）。

ページ全体を埋めると、コンテンツがフッターの下に入ります。どうして？それは絶対的なので、フッターはもはや "htmlフロー"の内側にはないからです。では、どうすればこれを修正できますか。ボディにpadding-bottomを追加します。これはボディが実際にそれがコンテンツより大きいことを確認します。

私はあなたたちのためにたくさん明確にしたことを願っています。

2
David

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

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
Nemus

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

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>
1
rashedcs
footer {
  margin-top:calc(5% + 60px);
}

これはうまくいきます

1
Karthikaeyan

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

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

cSSは

html, body, header, content{
height:100%;
}
1
Olatunde G.

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
I haz kode

高さを固定したり要素の位置を変更したりしない、非常に単純なフレックスソリューション。

_ 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 を使用してください。

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}
<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>
0
m.spyratos

あなたはこれを行うことができます

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
0
waploaj