內容不足以鋪滿屏幕高度時,footer居底顯示,如何頁面鋪滿了則在內容最下面,4種方法

這篇在瀏覽博客時看到的，轉載了他的文章 https://blog.csdn.net/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; 來包含。