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;  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。

針對上面的面試題要求，我一共使用了五種不同的方法來實現，經過測試都能在各瀏覽器中運行，最後我有幾點需要特別提出：

1. 上面所有DEMO中，要注意其方向性的配合，並且值要統一，如果您想嘗試使用自己布局需要的寬度值，請對照相關代碼環節進行修改；
2. 上面所有DEMO中，沒有設定他們之間的間距，如果您想讓他們之間有一定的間距，有兩種方法可能實現，其一在上面的DEMO基礎上修改相關參數，其二，在相應的裡面加上"div"標籤，並設定其“padding”值，這樣更安全，不至於打破你的布局
3. 因為我們這裡有一列使用了自適應寬度，在部分瀏覽器下，當瀏覽器螢幕拉至到一定的大小時，給我們帶來的感覺是自適應寬度那欄內容像是被隱藏，在你的實際項目中最好能在“body”中加上一個“min-width”的設定。

那麼有關於這個面試題，就我自己的拙見，就說到這吧。希望大家會喜歡這樣的答案，如果您有更好的答案，煩請告訴我一下，讓我也好好學習學習。如果大有發現有什麼錯誤，或者對這個有更好的意見，可以在下面的評論中直接給我留言。