页面内容不满屏幕高度时,footer底部显示

底部高度固定的情况下

<style>
    body,html{ height: 100%; margin: 0; }
    .content{
        min-height: 100%; 
	padding-bottom: 400px;
	box-sizing: border-box;
	height: 1200px;
    }
    footer{
	 100%;
	height: 400px;
	margin-top: -400px;
	background: #666;
    }
</style>

<div class="content">页面内容</div>	
<footer>底部</footer>

<style>
	body,html{ height: 100%; margin: 0; padding: 0; }
	.container{
		position: relative;
		min-height: 100%;
	}
	.content{
		padding-bottom: 400px;
	}
	footer{
		position: absolute;
		bottom: 0;
		left: 0;
		 100%;
		height: 400px;
		background: #666;
	}
</style>

<div class="container">
	<div class="content">页面内容</div>	
	<footer>底部</footer>
</div>
原文地址:https://www.cnblogs.com/xiaobaiv/p/9626168.html