此代码展示的效果阐述:(随着屏幕宽高度的变化而变化)
当页面内容小于屏幕高度时,头尾分别处在屏幕顶部和屏幕底部;
当页面出现滚动条时,头尾分别处于屏幕顶部和内容底部;
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%; 这一步很关键
}
.container{
min-height: 100%; 这一步也很关键
position: relative;
}
.box{
width:100%;
height: 500px;
background: blue;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height:100px;
background: #64A131;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div id="footer">
footer
</div>
</div>
</body>