如何锚定页脚，但保持内容高度为100％

Question

我正在使用粘性页脚，但工作不正常，并且在视口后延伸了200或400像素。

我认为显示我的需求比解释要容易，请参见下文：

在此处输入图片说明

编辑：我更新了我的代码以反映它与脚注的外观。

原始代码这是我的代码：

<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

您没有按照本教程进行操作，否则我push在wrapper看到一个空的div其中包含class push 。 同样， 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。

Answer 2

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

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

如何锚定页脚，但保持内容高度为100％

问题描述

2 个解决方案

解决方案1
4 已采纳 2012-11-04 20:17:10

解决方案2
0 2012-11-04 19:57:59

如何锚定页脚，但保持内容高度为100％

问题描述

2 个解决方案

解决方案1 4 已采纳 2012-11-04 20:17:10

解决方案2 0 2012-11-04 19:57:59

解决方案1
4 已采纳 2012-11-04 20:17:10

解决方案2
0 2012-11-04 19:57:59