2

我正在使用sticky footer，但它没有按应有的方式工作，并且在视口之外提供了 200 或 400 px 的扩展。

我认为展示我需要的东西而不是解释它会更容易，见下文：

在此处输入图像描述

编辑：我更新了我的代码以反映粘性页脚的外观。

粘页脚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

您没有按照教程进行操作，否则我会div在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 回答