今天有位朋友一早從妙味課堂轉來一個有關於CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那麼我們在看DEMO之前一起先來看看這個面試題的具體要求吧：
仔細分析試題要求，要達到效果其實也並不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看後你會覺得不是那麼回事：
上面簡單的分析了一下實現過程，那麼最終關鍵之處應該是就是“讓你的代碼要能同時實現兩點，其一就是左邊固定，右邊自適應的布局；其二就是實現兩列等高的布局”，如果這兩個功能完成，那麼你也就可以交作業了。那麼下面我們就先來看看這兩 點是如合實現：
這樣的布局，其實不是難點，我想很多同學都有實現過，那麼我就在此稍微介紹兩種常用的方法：
方法一：浮動布局
這種方法我采用的是左邊浮動，右邊加上一個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;
left: 220px;/* 寬度大小等與邊欄寬度大小*/
}
#col2 {
position: relative;
margin-right: 220px;/* 寬度大小等與邊欄寬度大小*/
}
#col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
}
#col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}
查看在線DEMO。
方法五：
HTML Markup
<div id="container1"> <div id="container"> <div id="left">Left Sidebar</div> <div id="content"> <div id="contentInner">Main Content</div> </div> </div> </div>
CSS Code
*{padding: 0;margin: 0;}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;/* 寬度大小等與邊欄寬度大小*/
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;/* 寬度大小等與邊欄寬度大小*/
}
#contentInner {
margin-left: 220px;/* 寬度大小等與邊欄寬度大小*/
overflow: hidden;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
查看在線DEMO。
針對上面的面試題要求，我一共使用了五種不同的方法來實現，經過測試都能在各浏覽器中運行，最後我有幾點需要特別提出：
那麼有關於這個面試題，就我自己的拙見，就說到這吧。希望大家會喜歡這樣的答案，如果您有更好的答案，煩請告訴我一下，讓我也好好學習學習。如果大有發現有什麼錯誤，或者對這個有更好的意見，可以在下面的評論中直接給我留言。
如需轉載煩請注明出處：W3CPLUS