Question

我想将页脚放在页面的底部（或者如果页面比屏幕短，则在屏幕的底部）。我正在使用代码：

<div id="wrapper">
    <div id="header-wrapper">
    ...
    </div> <!--header-wrapper-->

    <div class="clear"></div>

    <div id="body-wrapper">
        <div class="row960">

            <div class="menu">...</div>

            <div class="content">...</div>

        </div> <!--row960-->
    </div> <!--body-wrapper-->

    <div class="clear"></div>

    <div id="footer-wrapper" class="gray">

    </div> <!--footer-wrapper-->

</div> <!--wrapper-->

和css：

.clear{
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:24px;
    margin:0px
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;   
    width: 100%;
}

body{
    background-color: #000000;
    color: #FFFFFF;
    font-size: 14px;
}

#wrapper{
    min-height: 100%;
    position: relative;
}

#header-wrapper{
    height: 100px;
}

#body-wrapper{
    padding-bottom: 50px;
}

#footer-wrapper{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

.row960{
    width: 960px;
    margin: auto;
    overflow: auto;
}

#menu{
    width: 200px;
    float: left;
}

.content{
    width: 740px;
    margin-left: 20px;
    float: right;
}

问题是，即使页面长于屏幕（它覆盖文本），页脚也位于屏幕的底部。我用Firebug检查了它， body-wrapper 具有正确的高度，但 row960 具有屏幕高度而不是页面高度。我无法弄清楚如何解决它。有没有人知道该怎么做？

您可以在http://www.domenblenkus.com/fiap/notice.php

上看到我的页面

感谢您的帮助！

编辑：我不知道我是否足够强调，所以我想指出主要的问题是 row960 的高度不对。

Answer 1

如果你想要它在底部，那么你不需要这个位置：绝对或者底部：0，无论如何它都在你的底部。

Answer 2

您可以尝试使用margin进行操作。这是我正在采取的一个小提琴：http://jsfiddle.net/8WLyP/

基本上对于HTML，将所有内容放在“容器”元素中，然后您的页脚将成为该元素的兄弟。

然后在您的CSS中，您需要的是为html和body元素提供min-height: 100% 您的“容器”元素也将具有min-height: 100%

然后你需要给你的页脚一个height的X，在我的例子中它是50像素。 “container”元素需要具有margin-bottom: -50px或任何给出页脚高度的值。

完成所有这些操作后，请确保不要给“容器”和“页脚”任何其他边距或填充，如果您需要提供它们，那么您需要将它提供给子元素，在我的示例p元素中。

使用这种技术，与position: fixed相反，如果内容太短，页脚将粘在窗口的底部，当内容大于窗口/视口时，页脚将随内容移动。

HTML：

<div id="container">
    <header>
        <p>Header</p>
    </header>
    <section>
        <p>Section</p>
    </section>
</div>

<footer>
    <p>Footer</p>
</footer>

CSS：

html, body, header, footer, section, p, div {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

p {
    padding: 5px 10px;
}

header {
    width: 100%;
    background: #f00;
    color: #fff;
}

section {
    width: 100%;
    height: 200px;
    background :#0f0;
    color: #fff;
}

#container {
    width: 100%;
    min-height: 100%;
    margin-bottom: -50px;
}

footer {
    width: 100%;
    background :#00f;
    color: #fff;
    height: 50px;
}

Answer 3

您希望将页脚放在内容的底部。但是：如果上面的内容较短，您希望将它放在视口（窗口）的底部。

所以，试试这个：

CSS：

#footer-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
}

#body-wrapper {
    position: relative;
    height: 100%;
}

...和JavaScript （jQuery）：

var bodyWrap     = $('#body-wrapper'),
    footerWrap   = $('#footer-wrapper'),
    windowHeight = $(window).height();

var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());

if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);

由于时间不长，没有测试过。

试一试。

Answer 4

嗯，我想我的解决方案符合你所说的要求。当然还有其他方法可以做到这一点，所以如果你不同意这种方法，你可以继续四处看看。（另外，当我查看您的网站时，您的#wrappper元素似乎是#footer-wrapper的兄弟，而不是父母。）

因此，HTML看起来像（从您的网站复制的结构）：

<div id="wrappper">
    <div id="header-wrapper" class="gray">
    <div class="clear"></div>
    <div id="body-wrapper"></div>
    <div class="clear"></div>
    <div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>

请注意.spacer底部添加了#wrappper元素，这是＃34;粘性页脚＆＃34;的这种方法所必需的。

现在，您需要添加CSS（如果已有，则添加到任何当前定义）：

body, html{
    height: 100%;
}
#wrappper{
    min-height: 100%;
    margin-bottom: -50px;
    height: auto;
}
.spacer{
    height: 50px;
}

如果您想知道为什么我选择50px作为高度，那是因为它是页脚元素#footer-wrapper的高度。

无论如何，我只是在Firebug控制台中对此进行了测试，所以我不确定它在现场环境中的表现如何，但我相当肯定这会给你你想要的东西。如果这不是你想要的，请告诉我，我会很乐意进一步提供帮助！

将页脚放在页面底部

4 个答案: