如果文档高度小于窗口高度,则将页脚强制到页面底部 [英] Forcing footer to bottom of page, if document height is smaller than window height
问题描述
我正在以ipad的肖像模式修复我的网站显示。问题是页面长度不像ipad的纵向显示那么长。这是我正在谈论的图片:
I'm working on fixing the display of my website in ipad's portrait mode. The issue is that the page length isn't as long as the ipad's portrait display. Here is a pic of what I'm talking about:
我创建了一个jQuery函数,我认为当文档高度没有窗口高度那么大时会检测到这个函数,然后我可以将页脚的位置设置为固定。这是我的代码:
I created a jQuery function that I thought would detect when the document height isn't as big as the window height, which then I could set the position of the footer to fixed. Here is my code:
if ($(document).height() < $(window).height()) {
$('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}
当前CSS:
#footer-wrapper {
padding: 20px 0px 23px;
background-color: #E3E9DC;
border-bottom: 3px solid #007897;
border-top: 3px solid #007897;
color: #585858;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
}
@media screen and (max-width: 1024px) {
#footer-wrapper {
/*padding: 20px 0px 23px;*/
background-color: #E3E9DC;
border-bottom: 3px solid #007897;
border-top: 3px solid #007897;
color: #585858;
position: relative;
margin-bottom: -65px!important;
width: 100%;
text-align: center;
}
}
我认为这可行,但出于某种原因文档说它的高度大于窗口视口,因此不执行if语句。有没有人知道更可靠的实现方法?
I think this could work, but for some reason the document is saying that its height is bigger than the window viewport, so the if statement isn't executed. Does anyone know a more reliable way of achieving this?
推荐答案
只需将javascript更改为:
simply change javascript to:
if ($(document.body).height() < $(window).height()) {
$('#footer-wrapper').attr('style', 'position: fixed!important; bottom: 0px;');
}
这篇关于如果文档高度小于窗口高度,则将页脚强制到页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!