web-dev-qa-db-ja.com

フッター（div）をページの下部に揃える方法は？

フッターdivをページの下部に揃える方法を誰でも説明できますか。私が見た例から、それらはすべて、ページをスクロールした場所に関係なく、divを下部に表示したままにする方法を示しています。そんなふうにしたくないのですが。ページの下部に固定してほしいので、動かないようにします。ヘルプに感謝します！

htmlcssfooteralignment
75
Joey Morani

UPDATE

私の元々の答えは昔からのもので、リンクが壊れています。引き続き有用になるように更新します。

更新されたソリューションのインラインと、JSFiddleでの実際の例を含めています。注：CSSのリセットに依存していますが、これらのスタイルはインラインに含めません。 normalize.css を参照してください

解決策1-マージンオフセット

https://jsfiddle.net/UnsungHero97/ur20fndv/2/

HTML

<div id="wrapper">
  <div id="content">
    <h1>Hello, World!</h1>
  </div>
</div>
<footer id="footer">
  <div id="footer-content">Sticky Footer</div>
</footer>

CSS

html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100%;
  height: 100%;
}

#wrapper {
  background-color: #e3f2fd;
  min-height: 100%;
  height: auto !important;
  margin-bottom: -50px; /* the bottom margin is the negative value of the footer's total height */
}

#wrapper:after {
  content: "";
  display: block;
  height: 50px; /* the footer's total height */
}

#content {
  height: 100%;
}

#footer {
  height: 50px; /* the footer's total height */
}

#footer-content {
  background-color: #f3e5f5;
  border: 1px solid #ab47bc;
  height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
  padding: 8px;
}

ソリューション2-フレックスボックス

https://jsfiddle.net/UnsungHero97/oqom5e5m/3/

HTML

<div id="content">
  <h1>Hello, World!</h1>
</div>
<footer id="footer">Sticky Footer</footer>

CSS

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#content {
  background-color: #e3f2fd;
  flex: 1;
  padding: 20px;
}

#footer {
  background-color: #f3e5f5;
  padding: 20px;
}

詳細な説明とさまざまなアプローチのリンクを次に示します。

元の回答

これはあなたの言うことですか？

http://ryanfait.com/sticky-footer/

このメソッドは15行のCSSのみを使用し、HTMLマークアップはほとんど使用しません。さらに良いことに、それは完全に有効なCSSであり、すべての主要なブラウザーで動作します。 Internet Explorer 5以降、Firefox、Safari、Operaなど。

このフッターはページの下部に永続的に残ります。つまり、コンテンツがブラウザウィンドウの高さよりも大きい場合、フッターを表示するには下にスクロールする必要がありますが、コンテンツがブラウザウィンドウの高さよりも小さい場合、フッターは下に固定されますページの中央に浮かぶのではなく、ブラウザウィンドウの.

実装に関するサポートが必要な場合はお知らせください。これがお役に立てば幸いです。

87
Hristo

これにより、ページの下部にdivが固定されますが、ページが長い場合は、下にスクロールしたときにのみ表示されます。

<style type="text/css">
  #footer {
    position : absolute;
    bottom : 0;
    height : 40px;
    margin-top : 40px;
  }
</style>
<div id="footer">I am footer</div>

フッターがコンテンツ上に表示されないように、高さとマージン上部は同じである必要があります。

42
ovais.tariq

タイトルとコメントは、スティッキーフッターを探していなかったことを意味します（コンテンツが下にスクロールするとウィンドウの下部に固定されます）。コンテンツがウィンドウを満たさない場合、ウィンドウの下部に強制されるフッターを探していて、コンテンツがウィンドウの境界を超える場合は、コンテンツの下部にプッシュダウンする必要があると思います。

これは次の方法で実現できます。

<style>
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;
}
</style>

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

ソース： フッターをページの下部に置く方法

20
Jason George

これをチェックして、firefoxとIEで動作します

<style>
    html, body
    {
        height: 100%;
    }
    .content
    {
        min-height: 100%;
    }
    .footer
    {
        position: relative;
        clear: both;
    }
</style>

<body>
<div class="content">Page content
</div>
<div class="footer">this is my footer
</div>
</body>
7
Vinay B R

<div style="position:fixed;bottom:0;height:auto;margin-top:40px;width:100%;text-align:center">I am footer</div>を使用します。フッターは上に移動しません

6
user3395898

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

Htmlでmin-height：100％を指定すると、コンテンツが少ない場合でも、ページがビューポートの高さいっぱいになり、ページの下部にフッターが付きます。コンテンツが増加すると、フッターはコンテンツとともに下に移動し、下に固定され続けます。

JS fiddle working Demo： 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>
4
Sanjeev

私は初心者であり、これらの方法はうまくいきません。ただし、cssでmargin-topプロパティを試し、コンテンツピクセルの値を+5だけ追加しました。

例：コンテンツレイアウトの高さは1000pxだったので、フッターcssに1005pxのmargin-top値を入力しました。これにより、5pxの境界線とサイトの下部にあるフッターができました。

おそらくアマチュアのやり方ですが、効果的です!!!

1
Jamie