从粘性页脚错误计算的布局内容答案

【问题标题】：Layout content miscalculated from sticky footer从粘性页脚错误计算的布局内容
【发布时间】：2012-06-02 22:03:09
【问题描述】：

我有一个带有粘性页脚的布局。问题是主中心内容的实际高度不正确。虽然它隐藏在页脚后面并且最终用户看不到这一点，但它会导致例如在地图居中时出现问题。

如何缩短内容的高度，使其保持在页脚上方，从而呈现真实的内容高度（同时保持 100%）。为了说明，我在这里有一个工作示例： http://jsfiddle.net/mp8nr/43/

当您使用 Firebug 将鼠标悬停在元素上时，您会看到主要内容实际上位于粘性页脚下方。我只需要在不切断顶部的情况下将其向上移动，但我所有的尝试都失败了。我将不胜感激。

【问题讨论】：

【解决方案1】：

编辑：您的布局存在不止一件事。这是一个固定版本： http://jsfiddle.net/Ym3YP/

好的，所以您还没有实际上实现了粘性页脚。您只需放置一个固定位置的页脚。当您使用固定或绝对定位时，有问题的元素会从您的 HTML 流中取出，这就是您的 main-content div 一直延伸到底部的原因。它看不到或识别出挡路的页脚！

以下是如何正确实现可避免这些问题的粘性页脚：

取自Ryan Fait：

示例 HTML：

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

示例 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 */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

另外，请查看Smashing Magazine article，它深入解释了 CSS 流的基础知识，可以帮助您避免这些类型的问题。对于任何接触 CSS 的人来说，这是一本必读之书，它将使您免于未来的许多麻烦。

【讨论】：

我在布局上花费了很多时间和精力，也许我的术语有误...有没有办法解决我得到的问题而不是重新开始？
好的，让我试着修复你的 jsfiddle。