今天项目中原先没有页脚,但客户后来要求加页脚,但我发现某些内容较少的页面无法保证页脚在屏幕最下方.
html结构如下:
<body>
<div class="body">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
</body>于是我在页脚的php文件中写了一段js,意思是如果页面内容高度小于屏幕高度的话footer的margin-top等于屏幕高度-页面高度,从而达到始终保持在最下方的目的
JS代码如下
$(function(){
var wHeight = window.screen.height;
var h = $('.header').height();
var c = $('.content').height();
if(wHeight > h+c){
var sub = wHeight - (h + c);
var marginTop = sub;
}
else{
var marginTop = 50;
}
$('.footer').css('margin-top', marginTop);
})
这段代码在FF和chrome中正常运行,但在IE8中页面加载好以后却需要双击footer才能正确显示,不知道为什么...
后来改成:
$(function(){
var wHeight = window.screen.height;
var h = $('.header').height();
$('.content').height(wHeight - h);
})问题解决.
猜想: 是不是IE中对jq的css和height处理方式是不一样的?
我不是专业前端,具体原因还请高手解惑
1741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
