6

固定フッターは必要ありません。スティッキーフッターが必要です。

スティッキーフッターは最初は問題なく機能しましたが、コンテンツが特定の高さになると、フッターとページの下部の間にマージンができます。

ブラウザの高さとコンテンツのdivの高さをいじってみると、問題がどこにあるかがわかります。

フッターとページの下部の間にぎこちない余白が残ります。

前もって感謝します。

CSSコード：

html, body {
    height:100%;
    margin:0;
}
body {
    color:#FFF;
    font:16px Tahoma, sans-serif;
    text-align:center;
}
a {
    text-decoration:none;
}
#wrapper {
    height:100%;
    margin:0 auto;
    min-height:100%;
    padding-bottom:-30px;
    width:985px;
}
#content {
    background:#F00;
    height:950px;
}
#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
}
#footer span {
    color:#FFF;
    font-size:16px;
    padding-right:10px;
}
#push {
    clear:both;
    height:30px;
}

HTMLコード：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bad Footer</title>
        <link rel="stylesheet" href="badfooter.css" type="text/css">
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
        </div>
        <div id="push"></div>
    </div>
    <div id="footer">
        <a href=""><span>About Us</span></a>
        <span> | </span>
        <a href=""><span>Contact Us</span></a>
        <span> | </span>
        <a href=""><span>Home</span></a>
    </div>
</body>

4

4 に答える 4

3

cssでクラスに追加position: fixed;するだけです。footer

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: fixed; /*add this new property*/
}

-----更新-----

下部に留まるフッターが必要な場合は、次の2つが必要です。

#wrapper {
    /*height:100%;*/   /*you need to comment this height*/
    margin:0 auto;
    min-height:100%;
    padding-bottom:-30px;
    width:985px;
    position: relative;  /*and you need to add this */
}

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: relative;  /*use relative position*/
}


#wrapper {
  /*height:100%;*/   /*you need to comment this height*/
  margin: 0 auto;
  min-height: 100%;
  min-height: 700px;  /* only for Demo purposes */
  padding-bottom: -30px;
  width: 985px;
  position: relative;  /*and you need to add this */
}
#footer {
  background: #000;
  border-top: 1px solid #00F0FF;
  height: 30px;
  margin-top: -30px;
  padding: 5px 0;
  width: 100%;
  position: relative;  /*use relative position*/
}
<div id="wrapper">
  <div id="content">
    <span>The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).</span>
  </div>
  <div id="push"></div>
</div>
<div id="footer">
  <a href=""><span>About Us</span></a>
  <span> | </span>
  <a href=""><span>Contact Us</span></a>
  <span> | </span>
  <a href=""><span>Home</span></a>
</div>

于 2012-08-08T15:47:46.387 に答える
1

position: fixedフッタークラスに追加します。InternetExplorerの特定の古いバージョンでは機能しないことに注意してください。http://jsfiddle.net/kAQyK/

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
}

IEでも機能させる方法の例については、http：//tagsoup.com/cookbook/css/fixed/を参照してください。

于 2012-08-08T15:48:32.610 に答える
0

私は何年も同じ問題を抱えていましたが、何も機能していないようでしたが、フッターの下に表示されていた空白は実際にはまったく空白ではなく、白い背景に白いテキストが表示されたフッターからのオーバーフローであることに気付きました。私がしなければならなかったのは追加することだけでした：

overflow:hidden

私のCSSの私のフッターに。

誰かが私のために働いた解決策を望んでいるなら、それはhttp://getbootstrap.com/2.3.2/examples/sticky-footer.htmlと同じですが、overflow：hiddenが追加されています

于 2014-07-07T01:34:19.237 に答える
0

表示テーブル=JSも固定高さもありません！

最新のブラウザ（IE 8 +）で動作します-いくつかのブラウザでテストしましたが、すべてうまく機能しているようです。

この解決策を見つけたのは、高さが固定されておらず、JSがない粘着性のあるフッターが必要だったためです。コードは以下のとおりです。

説明：基本的に、ラッパーとフッターの2つの子要素を持つコンテナーdivがあります。ページに必要なもの（フッターを除く）をすべてラッパーに入れます。コンテナはに設定されてdisplay: table;いますラッパーはに設定されてdisplay: table-row;いますhtml、body、wrapperをに設定するとheight: 100%、フッターは下部に固定されます。

フッターもに設定されdisplay: table;ています。これは、子要素のマージンを取得するために必要です。フッターをに設定することもdisplay: table-row;できます。これにより、フッターを設定できなくなりますmargin-top。その場合、ネストされた要素を増やしてクリエイティブにする必要があります。

解決策： https ：//jsfiddle.net/0pzy0Ld1/15/

そしてより多くのコンテンツで：http： //jantimon.nl/playground/footer_table.html

/* THIS IS THE MAGIC */

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
html,
body,
#container,
#wrapper {
  height: 100%;
}
#container,
#wrapper,
#footer {
  width: 100%;
}
#container,
#footer {
  display: table;
}
#wrapper {
  display: table-row;
}
/* THIS IS JUST DECORATIVE STYLING */

html {
  font-family: sans-serif;
}
#header,
#footer {
  text-align: center;
  background: black;
  color: white;
}
#header {
  padding: 1em;
}
#content {
  background: orange;
  padding: 1em;
}
#footer {
  margin-top: 1em; /* only possible if footer has display: table !*/
}
<div id="container">
  <div id="wrapper">
    <div id="header">
      HEADER
    </div>
    <div id="content">
      CONTENT
      <br>
      <br>some more content
      <br>
      <br>even more content
    </div>
  </div>
  <div id="footer">
    <p>
      FOOTER
    </p>
    <br>
    <br>
    <p>
      MORE FOOTER
    </p>
  </div>
</div>

于 2016-02-08T16:55:38.660 に答える