如何锚定页脚但保持内容高度 100%答案

【问题标题】：How do I anchor my footer but keep my content height 100%如何锚定页脚但保持内容高度 100%
【发布时间】：2012-11-05 05:36:39
【问题描述】：

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

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

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

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

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

【问题讨论】：

如果您不展示您的 CSS，您希望如何帮助解决 CSS 问题？
百分比高度取决于其父级，当父级为position: absolute 时，它会回退到height: auto，这正是您所看到的。当您将absolute 应用于父级时，您会完全破坏您的布局。我认为没有 JavaScript 是不可能的，但我可能是错的。见w3.org/TR/CSS21/visudet.html#the-height-property。
这个问题的状态如何？自发布以来，人们试图提供帮助，但 OP 根本没有任何回应。
所提供的答案都不符合我的需求/回答了我的问题。我最终选择使用 z-index 将顶部和底部覆盖在身体上，牺牲了身体 100% 的高度。

标签： html css sticky-footer

【解决方案1】：

您没有按照教程进行操作，否则我会在您的 wrapper 中看到一个空的 div 类 push。此外，footer 不应包含在您的 wrapper 中。

根据online tutorial...

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

请尝试上述方法并发布您的实际 CSS。

【讨论】：

【解决方案2】：

试试这个方法将页脚锚定在底部。

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

【讨论】：

请参阅 OP 发布的 the example。这不是您的答案所提供的。