將footer固定在頁面底部的實現方法
<div id="header">header</div>
<div id="main"></div>
<div id="footer">footer</div>
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
position: relative !important;
}
#main {
padding-bottom: 100px;
background-color: #bdb76b;
}
/* main的padding-bottom值要等於或大於footer的height值 */
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #ffc0cb;
left: 0;
right: 0;
}第二種結構：
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>html,body{
height:100%;
}
.wrapper{
min-height:100%;
margin-bottom:-70px;
}
.content{
padding-bottom:70px;
}
.footer{
width:100%;
height:70px;
line-height:70px;
background-color:red;
text-align: center;
}