如何将页脚固定在页面底部

方法一

HTML Markup

<div id="container">
  <div id="header">Header Section</div>
    <div id="page" class="clearfix">
      <div id="left">Left Sidebar</div>
      <div id="content">Main content</div>
      <div id="right">Right sidebar</div>
    </div>
  <div id="footer">Footer Section</div>
</div>

CSS Code

html,body {
  margin: 0;
  padding:0;
  height: 100%;
}
#container {
  min-height:100%;
  height: auto !important;
  height: 100%; /*IE6不识别min-height*/
  position: relative;
}
#header {
    background: #ff0;
    padding: 10px;
}

#page {
    width: 960px;
    margin: 0 auto;
    padding-bottom: 60px;/*等于footer的高度*/
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;/*脚部的高度*/
    background: #6cf;
    clear:both;
}
/*=======主体内容部分=======*/
#left {
    width: 220px;
    float: left;
    margin-right: 20px;
    background: lime;
}

#content {
    background: orange;
    float: left;
    width: 480px;
    margin-right: 20px;
}

#right{
    background: green;
    float: right;
    width: 220px;
}

方法二：

HTML Markup

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left sidebar</div>
        <div id="content">Main content</div>
        <div id="right">Right sidebar</div>
    </div>
</div>
<div id="footer">Footer section</div>

CSS Code

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
#page {
    padding-bottom: 60px;/*高度等于footer的高度*/
}
#footer {
    position: relative;
    margin-top: -60px;/*等于footer的高度*/
    height: 60px;
    clear:both;
    background: #c6f;
}
/*==========其他div==========*/
#header {
    padding: 10px;
    background: lime;
}
#left {
    width: 18%;
    float: left;
    margin-right: 2%;
    background: orange;
}
#content{
    width: 60%;
    float: left;
    margin-right: 2%;
    background: green;
}
#right {
    width: 18%;
    float: left;
    background: yellow;
}

方法三：

HTML Code

<div id="container">
    <div id="header">Header Section</div>
    <div id="page" class="clearfix">
        <div id="left">Left sidebar</div>
        <div id="content">Main Content</div>
        <div id="right">Right Content</div>
    </div>
    <div class="push"><!-- not put anything here --></div>
</div>
<div id="footer">Footer Section</div>

CSS Code

html,
body{
    height: 100%;
    margin:0;
    padding:0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
    height: 60px;
    clear:both;
}
/*==========其他div效果==========*/
#header {
    padding: 10px;
    background: lime;
}
#left {
    width: 18%;
    float: left;
    margin-right: 2%;
    background: orange;
}
#content{
    width: 60%;
    float: left;
    margin-right: 2%;
    background: green;
}
#right {
    width: 18%;
    float: left;
    background: yellow;
}
#footer {
    background: #f6c;
}

方法四：

HTML Markup

<div id="header">Header Section</div>
<div id="page" class="clearfix">
    <div id="left">Left sidebar</div>
    <div id="content">Main Content</div>
    <div id="right">Right Content</div>
</div>
<div id="footer">Footer Section</div>

CSS Code

*{margin: 0;padding:0;}
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
 zoom:1; /* IE <8 */
}

#footer{
    height: 60px;
    background: #fc6;
    width: 100%;
}
/*==========其他div==========*/
#header {
    padding: 10px;
    background: lime;
}
#left {
    width: 18%;
    float: left;
    margin-right: 2%;
    background: orange;
}
#content{
    width: 60%;
    float: left;
    margin-right: 2%;
    background: green;
}
#right {
    width: 18%;
    float: left;
    background: yellow;
}

深入理解BFC和Margin Collapse

The Internet Explorer hasLayout Property