粘滞页脚在Safari和Chrome上无法正常工作
在这种情况下会发生什么情况?这是一个非常漂亮的.NET网站,但是当我在Safari或Chrome浏览器中查看网站时,有时候页脚不能正常工作,而且我必须滚动页面(移动滚动条)才能适合它。这是非常奇怪的事情。粘滞页脚在Safari和Chrome上无法正常工作
这是我使用的粘页脚插件,到目前为止,我用过的最好,它是从我已经使用过的网站http://www.drupalcoder.com/sticky-footer-plugin.html
处理和审讯其他cssstickyfooter.com和ryanfait。 com和其他许多人,下面这个是迄今为止我见过的最好的。 但它在Safari和Chrome上效果不佳。
检查了这一点:
<script type="text/javascript">
$(document).ready(function() {
$("#footer").stickyFooter();
});
// sticky footer plugin
(function($) {
var footer;
$.fn.extend({
stickyFooter: function(options) {
footer = this;
positionFooter();
$(window)
.scroll(positionFooter)
.resize(positionFooter);
function positionFooter() {
var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
if (docHeight < $(window).height()) {
var diff = $(window).height() - docHeight;
if (!$("#sticky-footer-push").length > 0) {
$(footer).before('<div id="sticky-footer-push"></div>');
}
$("#sticky-footer-push").height(diff);
}
}
}
});
})(jQuery);
</script>
您是否尝试过在一个在CSS-Tricks?
标记
<div id="footer">
Sticky Footer
</div>
CSS
#footer { height: 100px; }
脚本
// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if (($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
那个很酷,但页脚'移动',我不希望它在我移动页面时'移动'或滑动,这是错误的! – UXdesigner 2010-07-08 15:42:22
但这就是使用JS风格粘页脚的全部原因......所以它会随着滚动而移动。 如果你想要一个固定的页脚,那么你就纯粹的CSS – 2010-07-08 15:54:21
一个纯粹的CSS解决方案是在我的其他答案。 – 2010-07-08 16:09:13
我建议您尝试CSS的唯一解决方案link。这将在禁用javascript的浏览器上运行。
正如我在我的帖子中提到的...我尝试过那个,但它不适合我。 我不知道使用.NET/IIS是否与代码的解释有关......但是我不得不为.NET应用程序设计,这是一个痛苦。当我为php/mysql应用程序工作时更方便,方式更简单。 – UXdesigner 2010-07-08 15:44:26
HTML/CSS/JavaScript是客户端,如果客户端代码相同,服务器端语言没有区别。 – 2010-07-08 15:48:16
我也推荐使用CSS解决方案。我们的网站使用“粘性页脚”功能,它适用于我们尝试过的每个浏览器。 http://infinitas.ws - 只是分开源代码,看看我们做了什么。 – 2010-07-08 15:53:15
下面是我们如何做了our CSS唯一的解决办法
标记
<body>
<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="main"></div>
<div id="clearfooter"></div>
</div>
<div id="footer">
<div class="footer"></div>
</div>
</body>
CSS
/*General Site Design*/
body
{
margin: 0;
}
#wrapper
{
width: 900px; /*same width as w\idth inside "outer" element*/
}
#header
{
height: 63px;
}
#menu
{
width: 798px;
height: 20px;
margin-left: 50px;
}
#main
{
width: 780px;
margin-left: 60px;
margin-top: 20px;
min-height: 100%;
height: 100%;
background-color: #FFFFFF;
}
/*Footer Layout*/
#clearfooter
{
height: 75px; /*same as footer height*/
}
#footer
{
width: 900px;
height: 75px;
background-image: url(Images/Footer_bg.gif);
margin: -75px auto 0; /*opposite px to height*/
z-index:10;
}
.footer
{
padding-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
width: 800px;
}
注意“footer”是如何在“wrapper”之外的。本质上,它是布局其余部分之外的一个完全独立的元素。 – 2010-07-08 16:19:01
可以实现 “粘页脚” 单独CSS,这将允许残疾人JS浏览器获得相同的浏览体验。 – 2010-07-08 15:29:01