0

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

<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的高度不对。

4

4 回答 4

0

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

于 2013-07-31T16:12:31.680 回答
0

您可以尝试使用margin. 这是我正在做的事情：http: //jsfiddle.net/8WLyP/

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

然后在你的CSS中你需要给它们html和body元素一个min-height: 100% 你的“容器”元素也将有min-height: 100%

然后你需要给你的页脚一个heightX，在我的例子中它是 50 像素。“容器”元素将需要具有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;
}
于 2013-07-31T16:37:37.350 回答
0

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

所以，试试这个：

的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);

由于时间太短，没有测试。

试试看。

于 2013-07-31T16:40:05.327 回答
0

嗯，我想我有一个符合你所说的要求的解决方案。当然还有其他方法可以做到这一点，所以如果你不同意这种方法，你可以继续四处寻找。（此外，当我查看您的网站时，您的元素似乎#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，这是“粘性页脚”的这种方法所必需的。

现在，您需要添加 CSS（如果您已经拥有它们，请添加到任何当前定义）：

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

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

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

于 2013-07-31T17:11:10.937 回答