css的footer贴浏览器底端

最近开始做前台，由于页面内容较少，导致footer没有被撑到浏览器底端，而是在页面的中间部分，挺丑的。

上网查了资料，说footer贴底的方法挺多（为毛我只查到了一种--!），下面就介绍我查到的这种方法。

页面结构如下。

<div id="wrap">
　　<div id="main" class="clearfix">
　　　　<div id="content">
　　　　hehe，<br>这里是内容hehe，<br>这里是内容hehe，<br>这里是内容hehe，<br>这里是内容hehe，<br>这里是内容hehe，<br>这里是内容
　　　　</div>
　　　　<div id="side">
　　　　hehe,这里是side<br>hehe,这里是side<br>hehe,这里是side<br>hehe,这里是side<br>hehe,这里是side<br>hehe,这里是side<br>
　　　　</div>
　　</div>
</div>
<div id="footer">
hehe，这里是底部hehe，<br>这里是底部hehe，<br>这里是底部hehe，<br>这里是底部hehe，<br>这里是底部hehe，<br>这里是底部
</div>

 

css代码：

html, body, #wrap {height: 100%;margin:0; padding:0;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#content {float:left;}
#side {float:left;}
#footer {
　　position: relative;
　　margin-top: -150px; /* footer高度的负值 */
　　height: 150px;
　　clear:both;
}
.clearfix:after {
　　content: ".gc"；
　　display: block;　　
　　height: 0;　　
　　clear: both;　　
　　visibility: hidden;
}

 

在页面中，wrap和footer是同一级别的，wrap中又包裹了main，main中包裹了content和side，content和side是float：left属性（这个待会再说原因）。wrap的属性height：100%，使其撑满整个浏览器。

问题来了，wrap撑满了浏览器，那footer被压下去了，无法显示了。故添加属性margin-top:-150px;负的margin可以使footer在wrap中显示。那为什么是-150px？因为在wrap中的main的属性padding-bottom：150px，意思是当浏览器的高度改变时，会至少有150px的高度，留给了footer来显示在wrap底部。如果改变footer的margin-top:-160px;则当改变浏览器高度时，缩小到最小高度时，发现footer与main中内容重叠。所以至少要使这两者的高度相等，或者main的padding-bottom大于footer的margin-top。

好了，如果你的main中content和side没有浮动属性的话，到这基本就实现了footer贴底。但是如何是浮动呢？

如果main中的content和side是浮动的，就会导致main的高度没有办法撑开，更不要题padding-bottom：150px。也就是说，当改变浏览器高度时，footer会和main中内容重叠。所以要进行清除浮动，使用的是著名的clearfix(--!其实我今天才知道)。以前的老式做法是，在main中加一个div，如<div style"clear:both"></div>来进行清除浮动，但是这样不帅，多写了一行div，而且会有未知的弊端（在做拖拽的时候），所以我们使用高级一点的做法，clearfix:after。

<div id="main" class="clearfix">的意思是，在main的末尾加一个div，内容是“.gc”，而这个div的属性，我们看就知道了，它是用来清除浮动的。有了这个属性，main的高度就被撑开了，footer也可以在padding-top：-150px;这个地方来显示了。

最后注意：在main和footer之间如果想加别的div，则要使用绝对定位了。还有，body的margin:0; padding:0;的属性可以清除body的滚动条。

 

 

 

　　

　　

 

转载于:https://www.cnblogs.com/mygc/p/3266352.html