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

时间：2012-05-28 14:30:56

标签： css layout html sticky-footer

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

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

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

enter image description here

1 个答案:

答案 0 :(得分：1)

编辑：您的布局有多个问题。这是一个固定版本： http://jsfiddle.net/Ym3YP/

好的，所以你没有实际实现粘性页脚。你只需要一个固定定位的页脚。当您使用固定或绝对定位时，相关元素将从 HTML流中中获取，这就是您的主内容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的人来说都是必读的，并且将来会让你免于许多麻烦。

相关问题
最新问题