0

私のサイトは長いコンテンツのページでは問題ないように見えますが、短いコンテンツのページではフッターが上に移動します(編集: リンクは正しく機能するスティッキー フッターを表示するようになりました)。複数の解決策を試しましたが、どれも機能しません (ここで機能しないのは、フッターが固定されていないか、ページの中央に表示されているためです)。このソリューションとこれを試しました（両方のソリューションを削除したので、最初からやり直すことができます）。たとえば、chrome 開発者ツールまたはheight:100%firebug にアクセスして #wrapper div に追加すると (これは基本的に、これを機能させるための最初のステップです)、高さが 100% を超えて拡張され、フッターが下部に表示されません。

基本的な div 構造は次のとおりです。

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
</div>
<div id="footer"></div>

関連する div の CSS は次のとおりです。

html {
    height: 100%;
}
body {
    min-width:900px;
    height: 100%;
}
#container {
    height: 100%;
    padding: 20px;
    background: #f4f4f4;
}
#content {
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    margin: auto;
    width: 80%;
    max-width: 1000px;
    min-width:800px;
    padding: 10px;
    background: white;
    -moz-box-shadow: 0px 2px 6px 3px #C0C0C0;
    -webkit-box-shadow: 0px 2px 6px 3px #C0C0C0;
    box-shadow: 0px 2px 6px 3px #C0C0C0;
}
#footer {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    background: #101010;
    height: 14em;
    color: white;
}

/* These two are probably less important */
#sidebar {
    float: right;
    height: 100%;
    margin: 15px 25px;

    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 7px #000000;
    -webkit-box-shadow: 0px 0px 7px #000000;
    box-shadow: 0px 0px 7px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb');
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dcedeb')";
    /*Element must have a height (not auto)*/
    /*All filters must be placed together*/
    background-image: -moz-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -ms-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -o-linear-gradient(top, #ffffff, #dcedeb);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#dcedeb));
    background-image: -webkit-linear-gradient(top, #ffffff, #dcedeb);
    background-image: linear-gradient(top, #ffffff, #dcedeb);
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}
.post {
    width: 100%;
    float: left;
    height: 100%;
}

高さ 100% が機能しない理由と、スティッキー フッターを取得する方法を理解するために、firebug や CDT などを使用できる人はいますか?

編集：

@ajkochanowicz の説明に従って Ryan Fait のソリューションを実装すると、ページは次のようになります。 ここに画像の説明を入力

両方ともheight: 100%.

4

2 に答える 2

1

ここで使用しているソリューションが明確でないため、何が間違っているのかを判断するのは困難です。

ただし、私はRyan Fait のソリューションで成功しており、そのコードはここにはありません。

サイトの開発にあまり慣れていない場合は、これがプラグインされ、既に機能しているKickstrapをダウンロードできます。

それ以外の場合は、この CSS が必要です

* { margin: 0; }
html, body { height: 100%; }
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
}
#footer, #push { height: 142px; }

次に、div を次のようにマークアップに追加#pushします。

<div id="wrapper">
  <div id="container">
    <div id="content">
      <div class="post"></div> <!-- floats left -->
      <div id="sidebar></div> <!-- floats right -->
      <div style="clear:both"></div> <!-- clear hack -->
    </div>
  </div>
  <div id="push"></div>
</div>
<div id="footer"></div>

また、希望するフッターの高さに合わせて「142px」の値を編集することを忘れないでください。

編集 固定フッターと固定フッターの違いを明確にするために、固定フッターを次に示します: http://jsfiddle.net/y48Su/

そして、これは Ryan Fait のソリューションで実装されたスティッキー フッターです: http://jsfiddle.net/X6UB7/

于 2012-12-31T18:13:29.077 に答える
-1

次の方法で実行できます。

body {height: auto; padding-bottom: 160px;}
#footer {position: fixed; bottom: 0;}
于 2012-12-31T18:09:47.547 に答える