web-dev-qa-db-ja.com

CSSのページの下部にフッターを強制的に貼り付けるにはどうすればよいですか？

これは私のコードです：

#footer {
   font-size: 10px;
   position:absolute;
   bottom:0;
   background:#ffffff;
}

私はこれが何が悪いのか分かりません-誰でも助けてもらえますか？

編集：何が問題なのかをより明確にするために、フッターはページの読み込み時に期待どおりに下部に表示されます。ただし、スクロールバーが表示されるように、Webページの高さが画面上のサイズよりも大きい場合、フッターは同じ場所に残ります。つまり、ページの高さが<= 100％の場合、フッターは下部にあります。ただし、ページの高さが100％を超える場合、フッターはそのページの下部ではなく、表示される画面の下部にあります。

編集：驚いたことに、以下のソリューションはどれも機能しませんでした。代わりにサイドバーを実装することになりました。

htmlcssfootersticky-footer
25
oxo

おそらく この例 を探しているでしょう：

<div class="wrapper">
    Your content here
    <div class="Push"></div>
</div>
<div class="footer">
    Your footer here
</div>

CSS：

142ピクセルのフッターの場合

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .Push {
    height: 142px; /* .Push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
28
SLaks

これを試して：

position: fixed;  
bottom: 0;
8
jeegnesh

私は同じ質問を持っていて、答えを探してここに来て、それを見つけられず、自分でいくつかの実験を試みて、最終的に解を得ました：

#body {
  overflow-y: 0 auto;
}
#footer {
  position: fixed;
  top: 100vh; left: 0;
  margin-top: -100px;
  width: 100%; height: 100px;
  padding: 10px;
  color: #fff; background-color: rgba(0,0,0,0.6);
}
<div id="body">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div id="footer">
  <span>Some dummy Text</span>
</div>
2
Fabricio

ラッパーはページの残りの部分です。負/正のマージン/高さの値は、魔法が発生する場所です。

.wrapper 
  {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
  }
.footer, .Push 
  {
    height: 142px; /* .Push must be the same height as .footer */
  }
1
k to the z

Position：absoluteを使用しないでください。ページの高さが変化するフッターの場合。絶対的な場合、フッターはページの高さとともに移動しません。

ライアン・フェイトの方法を使いたい。

私は個人的にこのようにしますが;

.wrap {margin: auto; width: 980px;}
#content {min-height: 600px;}
#footer {height: 300px;}

<div class="wrap">
<div id="content">
</div>
</div>
<div id="footer">
<div class="wrap">
</div>
</div>

このように、負のマージンとパディングをいじる必要はありません。また、これはhtml5の一部になり、＃footerを

<footer>
</footer>
0
PHP

提案されたものはどれも私が望むものを達成しなかったため、私は解決策を見つけるのに苦労しました：

  • コンテンツが少ない場合は、ページの中央ではなく、ページの一番下に留まります。
  • 十分なコンテンツがある場合は、固執せずにコンテンツを重ねるだけで、一番下にとどまります。
  • ユーザーがフッターを下にスクロールした場合にのみ表示されるように、一目で非表示にします。

これは私のために働いたものです：

html：

<body>
  <div class="page-wrapper">
    <h1>
      Page
    </h1>
  </div>
  <footer>
    Footer here
  </footer>
</body>

css：

body {
    height: 100%;
    width: 100%;
}

.page-wrapper {
  min-height:100vh; /*1vh = 1% of browser screen height*/
}

footer{
    position: relative;
    width: 100%;
    bottom: 0px;
}

ここ アクション中。

0
J0ANMM
.footer-small, .Push {
    background-color: #2C3E50;
    position: fixed;
    padding-top: 5px;
    clear:both;
    width: 100%;
    bottom:0px;
    z-index: 0;
}

これも私のために働いています....

0
Makhi Ngubane
#footer { clear:both; position:fixed; width:100%; height:50px; bottom:0; background:black;}
0
Samuel

これが私がやったことで、フッターが一番下に留まる原因になりました。

.footer2{
background-color:#606060 ;
color: #ffffff;
height: 30px;
bottom:0px;
position:fixed;
width:100%;
}
0
Carla