今天項目中原先沒有頁腳,但客戶後來要求加頁腳,但我發現某些內容較少的頁面無法保證頁腳在屏幕最下方.
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處理方式是不一樣的?
我不是專業前端,具體原因還請高手解惑