页脚动态贴在底部需要满足以下两个条件：
- 当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部。
- 当主体的内容高度超过可视区域高度的时候，页脚将按正常布局。
方法一：footer高度固定+绝对定位
<body>
<header>header</header>
<main>content</main>
<footer>footer</footer>
</body>html{height:100%;}
body{min-height:100%;margin:0;padding:0;position:relative;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}
footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}
方法二：footer高度固定+margin负值
<body>
<div class="container">
<header>header</header>
<main>main content</main>
</div>
<footer>footer</footer>
</body>
html,body{height:100%;margin:0;padding:0;}
.container{min-height:100%;}
header{background-color: #ffe4c4;}
main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}
方法三：css table实现的圣杯布局
<div class="wrapper">
<div class="header">头部</div>
<div class="main">
<div class="box sidebar">左侧栏</div>
<div class="box content">主体内容</div>
<div class="box sidebar">有侧栏</div>
</div>
<div class="footer">页脚底部</div>
</div>
body { background: @beige;
color: black;
}
.wrapper {
height: 100%;
display: table;
100%;
text-align: center;
}
.header {
display: table-row;
height: 1px;
background: @yellow;
}
.main {
height: 100%;
display: table;
100%;
}
.box {
display: table-cell;
}
.sidebar {
100px;
background: @orange;
}
.footer {
display: table-row;
height:1px;
background: @green;
color: @beige;
}
@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;