Question

我正在使用sticky footer，但它没有正常运行，并且在视口之外提供了200或400像素的扩展名。

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

enter image description here

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

ORIGINAL 这是我的代码：

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

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

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

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

还注意到我在代码中有侧边栏但在提供的图片中没有。我也需要一个没有背景的侧边栏。

Answer 1

您没有按照教程操作，或者我在div中看到一个空push的{{1}}课程。此外，wrapper不应在footer内。

根据online tutorial ...

wrapper

CSS：

<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>

jsFiddle Demo Page

请尝试以上操作并发布您的实际CSS。

Answer 2

尝试使用此方法将页脚锚定在底部。

.footer {
width:100%;
position:fixed;
bottom:0;
height:30px;
}

如何锚定我的页脚但保持我的内容高度100％

2 个答案: