如果页面很短，则将HTML页脚保留在窗口的底部 [英] Keeping HTML footer at the bottom of the window if page is short

问题描述

我的一些网页很短。在这些页面中，页脚可能会在窗口中间结束，页脚下面是空格（白色）。这看起来很丑。我希望页脚位于窗口的底部，而有限的内容主体会被拉长。

但是，如果网页很长，并且必须滚动看到页脚（或全部），那么事情应该正常。

用CSS做这件事的正确方法是什么？我需要Javascript / jQuery来实现这一点吗？

我只关心IE9 +和其他浏览器的现代版本。页脚的高度也可能因页面而异，所以我不想依赖高度。 解决方案

查看此网站。他有一个很好的教程，介绍如何用CSS来做到这一点。

为了防止Matthew的网站被删除，我复制了他的CSS。

  html，
 body {
 margin：0; 
 padding：0; 
身高：100％; 
} 
 #container {
 min-height：100％; 
职位：亲属; 
} 
 #header {
 background：＃ff0; 
 padding：10px; 
} 
 #body {
 padding：10px; 
 padding-bottom：60px; / *页脚高度* / 
} 
 #footer {
 position：absolute; 
 bottom：0; 
宽度：100％; 
 height：60px; / *页脚高度* / 
背景：＃6cf; 
} 
  

编辑

由于页脚的高度因页面而异，因此您可以获取页脚的高度，然后使用javascript调整#body padding-bottom。这里是一个使用jQuery的例子。

  $（function（）{
 $（'＃body'）。css（'padding-bottom'， $（'＃footer'）。height（）+'px'）; 
}）; 
  

Some of my webpages are short. In those pages, the footer might end up in the middle of the window and below the footer is whitespace (in white). That looks ugly. I'd like the footer to be at the bottom of the window and the limited content body just gets stretched.

However, if the webpage is long and you have to scroll to see the footer (or all of it), then things should behave as normal.

What's the proper way to do this with CSS? Do I need Javascript/jQuery to make this happen?

I only care about IE9+ and modern versions of other browsers. The height of the footer can change from page to page too, so I'd like to not rely on the height.

解决方案

Check out this site. He has a good tutorial on how to do this with css.

I copied his css just in case Matthew's site is taken down.

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

EDIT

Since the height of the footer is different from page to page, you could get the height of the footer and then adjust the #body padding-bottom with javascript. Here is an example using jquery.

$(function(){
    $('#body').css('padding-bottom', $('#footer').height()+'px');   
});  

这篇关于如果页面很短，则将HTML页脚保留在窗口的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！