0

我正在尝试在我的网站上放置一个粘性页脚。不是“无论滚动多少都粘在窗口底部”的粘滞页脚，而是“无论页面多长，只要您一直向下滚动，页脚都会位于窗口底部”粘滞页脚.

我已经尝试从网络上实现 4-5 个不同的版本，但我遇到了一个问题：

每次我有一个小于用户浏览器高度的页面时，页面会在内容之后，页脚之前添加大约100px，然后你会看到你的页面，一个很大的空白区域，然后如果你滚动下来，页脚。

这是一个有问题的页面：https ://elcheapohost.com/contact

所以这里是代码的简化版本：

<head>...snip...</head>
<div id="wrap">Content Here</div>
</div><!-- /wrap--><div id="foot">
<footer>
        <div class=" copyright">&copy; Copyright <?php echo date('Y'); ?> <a href="http://www.joshuapedroza.com">Joshua Pedroza</a>. All Rights Reserved. <a href="/tos">Terms of Service</a>.</div>
</footer><!-- End  footer  --></div> <!-- /foot -->

和CSS：

html, body {
    height:100%;/* needed to base 100% height on something known*/
}
#wrap {
    margin:auto;
    min-height:100%;
    padding-top:-48px;/*footer height - this drags the outer 40px up through the top of the monitor */

}
* html #wrap {
    height:100%
}
#foot {/* footer now sits at bottom of window*/
    padding-top: 35px;
    margin:auto;
    height:48px;/* must match negative margin of #wrap */
    clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#wrap:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

我不确定这是否是 twitter 引导问题，因为我过去曾遇到过同样的错误问题。有没有其他人遇到过？

页面示例： 内容较长： http: //gyazo.com/a03348451474ad62e3250273cfe474de 内容较短： http: //gyazo.com/8221af4593dd58f98cedebd5670e4e8a（无论页面多短，它都会添加到滚动条中）

4

2 回答 2

0

从...除去

padding-top:35px

来自/#脚

在stick_footer.css

和

margin-top:35px

从页脚

在styles.css

页脚和内容底部之间将不再有空格。如果这不是您的答案，请告诉我，我可以更深入地挖掘。

于 2013-07-22T00:21:18.237 回答
0

你能做一个截图并用url标记页面，这样我就可以看到它。

编辑：我没有在我的计算机上看到这种情况。我已经针对我拥有的所有浏览器检查了屏幕截图中的页面。您使用的是哪个浏览器？

于 2013-07-22T07:48:24.743 回答