2

私はsticky footerで作業していましたが、正常に機能せず、ビューポートを超えて 200 または 400 ピクセルのような拡張を行っていました。

以下を参照してください。

ここに画像の説明を入力

編集:スティッキーフッターの外観を反映するようにコードを更新しました。

固定フッター jsFiddle

オリジナル そしてここに私のコードがあります：

<div id="wrapper">
  <header>
    Header
  </header>

  <div id="container">
    <div id="content">
      Content
    </div>

    <div id="sidebar">
      Sidebar
    </div>
  </div>

  <footer>
    Footer
  </footer>
</div>

また、コードにはサイドバーがありますが、提供されている画像にはありません。背景なしのサイドバーも必要です。

4

2 に答える 2

4

あなたはチュートリアルに従わなかった、または私はあなたのに空のdivwith クラスが表示pushされますwrapper. また、footerあなたの中にあるべきではありませんwrapper。

オンラインチュートリアルによると...

<body>
        <div class="wrapper">
            <header>
                Header
            </header>
            <div id="container">
                <div id="content">
                    Content
                </div>
                <div id="sidebar">
                    Sidebar
                </div>
            </div>
            <div class="push"></div>
        </div>

        <footer>
            <p>Copyright (c) 2008</p>
        </footer>
</body>

CSS:

* {
    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 */
}

jsFiddle デモページ

上記を試して実際のCSSを投稿してください。

于 2012-11-04T20:17:10.173 に答える
1

フッターを下部に固定するには、この方法を試してください。

.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}
于 2012-11-04T19:57:59.403 に答える