让footer固定在页面底部

最近做了几个触屏版页面，页面比较简单，内容短，但是都有个底部，面对各种机型，底部不是一直处于底部位置，长屏、高分辨率的机子上的表现是悬在半空中，就像一根刺卡在喉咙啊。为此做了几种尝试。

其中有个活动的触屏页面只有一个，并且页面上内容固定，所以首先想到的处理方式也比较简单，也很实用。

html代码：

<header>头部</header>
<div>内容</div>
<footer>底部</footer>

html代码方面不需要额外增加什么标签，改怎么写就怎么写，处理的重点是css：

html,body{ height: 100%;}

body{ position: relative; min-height: 550px;}

footer{ position: absolute; bottom: 0; left: 0; }

以上的样式都是必须的，主要是用到了相对定位，min-height的值根据页面内容来定，要自己计算下，在最小的高度里面，要能放下header、中间内容和底部。这个做法适合一些内容固定、单个页面。

如果是针对一个站点来处理，各个页面的高度必然不会太一致，而且有的页面内容是动态的，所以要找个能批量处理的方法。先看代码：

html代码：

 <div class="wrapper">
     <div class="wrapper-inner">
          <header>头部</header>
          <div>内容</div>
     </div>
</div>
<footer>底部</footer>

css代码：

 html,body{ height: 100%; }

.wrapper{ min-height: 100%; margin-bottom: -50px;}

.wrapper-inner{ padding-bottom: 50px; }

footer{ height: 50px; overflow: hidden;}

从上面的html代码部分看出，多了两层div，分别是div.wrapper和div.wrapper-inner，对于简单的页面，这样的多余确实不能忍，但是为了拔刺，再加两层我也干啊。

看css，前面三段是必须的，margin和padding具体的值根据footer的内容决定，不要小于footer的高度就行了，否则会出现不必要的滚动条。

以上两种方法都很好的使footer固定在页面底部，可根据页面来选择使用哪种方法。

让footer固定在页面底部,布布扣,bubuko.com