CSS布局——左定寬度右自適應寬度並且等高布局

今天有位朋友一早從妙味課堂轉來一個有關於CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那麼我們在看DEMO之前一起先來看看這個面試題的具體要求吧：

 

1. 左側固定寬，右側自適應屏幕寬；
2. 左右兩列，等高布局；
3. 左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）
4. 要求不用JS或CSS行為實現；

仔細分析試題要求，要達到效果其實也並不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看後你會覺得不是那麼回事：

1. 左邊固定，右邊自適應布局，這個第一點應該來說是非常的容易，實現的方法也是相當的多，那麼就可以說第一條要求已不是什麼要求了；
2. 左右兩列等高布局，這一點相對來說要復雜一些，不過你要是了解了怎麼實現等高布局，那麼也是不難。我個人認為這個考題關鍵之處就在考這裡，考你如何實現等高布局；所以這一點你需要整明白如何實現；
3. 至於第三條要求，應該來說是很方面的，我們隨處都可以看到實現最小高度的代碼；
4. 第四條這個要求我想是考官想讓我們面試的人不能使用js來實現等高布局和最小高度的功能。

上面簡單的分析了一下實現過程，那麼最終關鍵之處應該是就是“讓你的代碼要能同時實現兩點，其一就是左邊固定，右邊自適應的布局；其二就是實現兩列等高的布局”，如果這兩個功能完成，那麼你也就可以交作業了。那麼下面我們就先來看看這兩 點是如合實現：

一、兩列布局：左邊固定寬度，右邊自適應寬度

這樣的布局，其實不是難點，我想很多同學都有實現過，那麼我就在此稍微介紹兩種常用的方法：

方法一：浮動布局

這種方法我采用的是左邊浮動，右邊加上一個margin-left值，讓他實現左邊固定，右邊自適應的布局效果

HTML Markup

		<div id="left">Left sidebar</div>
		<div id="content">Main Content</div>
	

CSS Code

		<style type="text/css">

			*{
				margin: 0;
				padding: 0;
			}

			#left {
				float: left;
				width: 220px;
				background-color: green;
			}

			#content {
				background-color: orange;
				margin-left: 220px;/*==等於左邊欄寬度==*/
			}
		</style>
	

上面這種實現方法最關鍵之處就是自適應寬度一欄“div#content”的“margin-left”值要等於固定寬度一欄的寬度值，大家可以點擊查看上面代碼的DEMO

方法二：浮動和負邊距實現

這個方法采用的是浮動和負邊距來實現左邊固定寬度右邊自適應寬度的布局效果，大家可以仔細對比一下上面那種實現方法，看看兩者有什麼區別：

HTML Markup

		<div id="left">
			Left Sidebar
		</div>

		<div id="content">
			<div id="contentInner">
				Main Content
			</div>
		</div>
	

CSS Code

		*{
			margin: 0;
			padding: 0;
		}
		#left {
			background-color: green;
			float: left;
			width: 220px;
			margin-right: -100%;
		}
		
		#content {
			float: left;
			width: 100%;
		}
		
		#contentInner {
			margin-left: 220px;/*==等於左邊欄寬度值==*/
			background-color: orange;
		}
	

這種方法看上去要稍微麻煩一點，不過也是非常常見的一種方法，大家可以看看他的DEMO效果。感覺一下，和前面的DEMO有什麼不同之處。

我在這裡就只展示這兩種方法，大家肯定還有別的實現方法，我就不在多說了，因為我們今天要說的不是這個問題。上面完成了試題的第一種效果，那麼大家就要想辦法來實現第二條要求——兩列等高布局。這一點也是本次面試題至關重要的一點，如果你要是不清楚如何實現等高布局的話，我建議您先閱讀本站的《八種創建等高列布局》，裡面詳細介紹了八種等高布局的方法，並附有相關代碼，而且我們後面的運用中也使用了其中的方法。

現在關鍵的兩點都完成了，那麼我們就需要實現第三條要求，實現最小高度的設置，這個方法很簡單：

		min-height: 200px;
		height: auto !important;
		height: 200px;
	

上面的代碼就輕松的幫我們實現了跨浏覽器的最小高度設置問題。這樣一來，我們可以交作業了，也完面了這個面試題的考試。為了讓大家更能形象的了解，我在這裡為大家准備了五種不同的實現方法：

方法一：

別的不多說，直接上代碼，或者參考在線DEMO，下面所有的DEMO都有HTML和CSS代碼，感興趣的同學自己慢慢看吧。

HTML Markup

		<div id="container">
			<div id="wrapper">
				<div id="sidebar">Left Sidebar</div>
				<div id="main">Main Content</div>
			</div>

		</div>
	

CSS Code

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html {
				height: auto;
			}

			body {
				margin: 0;
				padding: 0;

			}

			#container {
				background: #ffe3a6;
			}

			#wrapper {
				display: inline-block;
				border-left: 200px solid #d4c376;/*==此值等於左邊欄的寬度值==*/
				position: relative;
				vertical-align: bottom;
			}

			#sidebar {
				float: left;
				width: 200px;
				margin-left: -200px;/*==此值等於左邊欄的寬度值==*/
				position: relative;			
			}

			#main {
				float: left;
			}	

			#maing,
			#sidebar{
				min-height: 200px;
				height: auto !important;
				height: 200px;
			}
		</style>
	

查看在線DEMO。

方法二

HTML Markup

		<div id="container">
			<div id="left" class="aside">Left Sidebar</div>
			<div id="content" class="section">Main Content</div>
		</div>
	

CSS Code

		<style type="text/css">
			 	*{margin: 0;padding: 0;}
			 	#container {
			 		overflow: hidden;
			 	}

			 	#left {
			 		background: #ccc;
			 		float: left;
			 		width: 200px;
			 		margin-bottom: -99999px;
			 		padding-bottom: 99999px;

			 	}

			 	#content {
			 		background: #eee;
			 		margin-left: 200px;/*==此值等於左邊欄的寬度值==*/
			 		margin-bottom: -99999px;
			 		padding-bottom: 99999px;
			 	}
			 	#left,
			 	#content {
			 		min-height: 200px;
			 		height: auto !important;
			 		height: 200px;
			 	}
		</style>
	

查看在線的DEMO。

方法三：

HTML Markup

		<div id="container">
			<div id="content">Main Content</div>
			<div id="sidebar">Left Sidebar</div>
		</div>
	

CSS Code

			*{margin: 0;padding: 0;}
		 	#container{
		 		background-color:#0ff;
		 		overflow:hidden;
		 		padding-left:220px; /* 寬度大小等與邊欄寬度大小*/
		 	}
		 	* html #container{
		 		height:1%; /* So IE plays nice */
		 	}
		 	#content{
		 		background-color:#0ff;
		 		width:100%;
		 		border-left:220px solid #f00;/* 寬度大小等與邊欄寬度大小*/
		 		margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
		 		float:right;
		 	}
		 	#sidebar{
		 		background-color:#f00;
		 		width:220px;
		 		float:right;
		 		margin-left:-220px;/* 寬度大小等與邊欄寬度大小*/
		 	}
		 	#content,
		 	#sidebar {
		 		min-height: 200px;
		 		height: auto !important;
		 		height: 200px;
		 	}
	

查看在線DEMO效果。

方法四：

HTML Markup

		<div id="container2">
			<div id="container1">

					<div id="col1">Left Sidebar</div>
					<div id="col2">Main Content</div>
		 	</div>
		</div>
	

CSS Code

		*{padding: 0;margin:0;}
		#container2 {
		  	float: left;
		  	width: 100%;
		  	background: orange;
		  	position: relative;
		  	overflow: hidden;
		  }
		  #container1 {
		  	float: left;
		  	width: 100%;
		  	background: green;
		  	position: relative;
		  	lef