web-dev-qa-db-ja.com

ページ下部にフッターを固定する方法

私のhtmlには、divクラスの「フッター」があります。私は＃000までのbgを持ち、ページ幅全体を占有し、その後に空白を残さないようにします。

私は現在このCSSを使用しています：

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

しかし、ページ幅全体がこのcssコードで満たされていません。

何か助けは？ありがとう！

cssfooter
13
rodrigoalvesvieira

スティッキーフッターを使用します： http://ryanfait.com/sticky-footer/

/*

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

    */

* {
  margin: 0;
}

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 */
}
<div class='wrapper'>
  body goes here
  <div class='Push'></div>
</div>
<div class='footer'>Footer!</div>

基本的に、ラッパーの高さは100％で、フッターの高さに負のマージンがあり、スクロールせずにフッターが常に一番下になるようにします。

Divはブロックレベルの要素であり、その幅はデフォルトで親の100％であるため、これにより100％幅のフッターとより狭いボディを持つという目標が達成されます。ここのフッターはラッパーdivに含まれていないことに注意してください。

21
Chris Sobolewski

次のようにフッターdivをページに絶対的にすることができます。

.footer {
    position:absolute;
    bottom:0px;
    width: 100%;
    margin: 0;
    background-color: #000;
    height: 100px;/* or however high you would like */
}
2
Jason

ウェブページのセクションごとにいくつかのDIV要素を使用しています。

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

各セクションは相対的に配置されています。ラッピングDIVsを使用して、ラッパーに特定の幅を設定し、ラッパー内の要素を100%幅。

絶対的な配置とフローティングから離れることをお勧めします。互換性の問題が発生するため、すべてのブラウザーで正しく表示されない場合があります。

1
Jared

この問題は、ブラウザの解像度に関係なく、Bootstrapメニューと固定フッターを使用してWebアプリケーションを起動したときに発生しました。

フッター要素に下のスタイルを使用

インラインスタイル

Divのクラス属性を使用する外部スタイルシート

  <div class="footer"></div>

style.css

  .footer
  {
   backgroud-color:black;
   position:fixed;
   bottom:0;
   height:2%;
  }

Divのid属性を使用する外部スタイルシート

 <div id="divfooter"></div>

style.css

 #divfooter
 {
  backgroud-color:black;
  position:fixed;
  bottom:0;
  height:2%;
 }
0
Kuntady Yathish

CSSでこのスタイルを使用して目標を達成できます

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

bootstrapを使用している場合は、margin-left：-15pxおよびmargin-right：-15pxで試してください。ただし、独自のクラスがある場合は、ほとんどの場合必要ありません。

0
Isaac Shrestha

あなたのフッターをあなたのページに固定したい場合：

.footer{ position:fixed;}

しかし、フッターをページの最後に固定したい場合：

それを参照

0
8611670474

html：

<div class="footer">
    <p>
        Some text comes here! &copy; 2015 - 2017
    </p>
</div>

css：

.footer {
    width: 100%;
    height: auto;
    text-align: center;
    background: rgb(59, 67, 79);
    position: fixed;
    bottom: 0%;
    margin-top: 50%;
}

* {
    padding: 0;
    margin: 0;
}
0
Kristóf Köblös

これらすべての返信が私に何らかの形で役立ちました。私はこのコードに来ました：

.footer {
  height: 59px;
  margin: 0 auto;
  color: #fff;
  clear: both;
  padding: 2em 2em;
  background: #000;
  position: relative;
  top: 508px;
}

ありがとう！

0
rodrigoalves