内容不足以铺满屏幕高度时,footer居底显示,如何页面铺满了则在内容最下面,4种方法

本文介绍了四种方法实现当页面内容不足时footer保持在底部，内容足够时footer紧随内容下方。关键点包括设置最小高度、使用负margin和padding配合box-sizing: border-box。详细代码示例可在文中找到。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇在浏览博客时看到的，转载了他的文章 https://blog.youkuaiyun.com/u012076852/article/details/53068082

同样话不多说，直接上代码

方法一：



html：
<div class="page">
    主要页面
</div>
<footer>底部</footer>


css:
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page{
    box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
    min-height: 100%;
    padding-bottom: 300px;
}
footer{
    height: 300px;
    margin-top: -300px;
    opacity: 0.5;
}

主要内容放在page内部，page最小高度为100%（注意这里html，body高度也要设为100%）。page有个padding-bottom大小为footer的高度（按需要调整），最重要的一点page的box-sizing:border-box，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，也就是说page的padding-bottom也会设定在min-height：100%内。而footer的margin-top为负的自身高度，把自己拉到page的padding-bottom空白块上，从而达到需求效果。
优点：简洁明了，没有冗余的div盒子；
缺点：box-sizing:border-box的兼容问题,ie7以下包括ie7不支持

方法二：

html:
<div class="page-container">
    <div class="page-main">
        主要页面 
    </div>
    <footer>底部</footer>
</div>


csss:
html,body{
    height: 100%;
    margin: 0;
    padding: 0;
}
.page-container{
    position: relative;
    min-height: 100%;
}
.page-main{
    padding-bottom: 300px;
}
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 300px;
}
主要内容放在page-main里面，page-container最小高度100%（注意这里html，body高度也要设为100%），position为relative。footer的position为absolute，相对于page-container居于底部。page-main有个padding-bottom为footer的高度（根据需要调整），从而达到需求效果；
优点：兼容性比较好，ie6放弃治疗；
缺点：套了两层div；

方法三

html:
		<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"><!-- 这里不要放任何东西 --></div>
				</div>
   		<div id="footer">Footer Section</div>

css:
			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{
				/*为了兼容所有浏览器以及ie6 不支持box-sizing: border-box;*/
					height: 60px;
					clear:both;
				}
			
				#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:
	<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 :

				*{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;
				}
			
jQuery :

				<script type="text/javascript">
						// Window load event used just in case window height is dependant upon images
						$(window).bind("load", function() {
							var footerHeight = 0,
									footerTop = 0,
									$footer = $("#footer");
							positionFooter();
							//定义positionFooter function
							function positionFooter() {
								//取到div#footer高度
								footerHeight = $footer.height();
								//div#footer离屏幕顶部的距离
								footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
								/* DEBUGGING STUFF
									console.log("Document height: ", $(document.body).height());
									console.log("Window height: ", $(window).height());
									console.log("Window scroll: ", $(window).scrollTop());
									console.log("Footer height: ", footerHeight);
									console.log("Footer top: ", footerTop);
									console.log("-----------")
								*/
								//如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
								if ( ($(document.body).height()+footerHeight) < $(window).height()) {
									$footer.css({
										position: "absolute"
									}).stop().animate({
										top: footerTop
									});
								} else {
									$footer.css({
										position: "static"
									});
								}
							}
							$(window).scroll(positionFooter).resize(positionFooter);
						});
				</script>

本文中，当设置最小高度时内容的最小高度（即内容不够时依然）和body和html 一样高，如果用的是第一种方法那么底部就必须margin-top:负自身高度，然而内容又会被覆盖，所以内容又需要padding-bottom:底部的高，然而设置padding后又会多出padding 的距离所以需要box-sizing: border-box; 来包含。