0

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

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

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

在此处输入图像描述

4

1 回答 1

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 文章，它深入解释了 CSS 流的基础知识，应该可以帮助您避免这些类型的问题。对于任何进入 CSS 的人来说，这是一本必读的书，它将使您免于将来的许多麻烦。

于 2012-05-28T15:10:35.250 回答