從二列固定寬度入手，開始嘗試二列布局的情況下，左右欄寬度能夠做到自適應，從一列調適型配置中我們知道，設定自適應主要通過寬度的百分比值設定，因此在二列寬度自適應的布局中也同樣是對百分比寬度值的設計，繼續上面的CSS代碼，我們得新定義二列的寬度值：
| 代碼如下 |
複製代碼 |
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 70%;
} |
左欄寬度設定為寬度20%，右欄寬度設定為寬度的70%，看上去像一個左側為導航，右側為內容的常見網頁形式。
| 代碼如下 |
複製代碼 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二列寬度自適應——111cn.net</title>
<style type="text/css">
<!--
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 70%;
}
-->
</style>
</head>
<body>
<div id="left">左列——(111cn.net)</div>
<div id="right">右列——二列寬度自適應(111cn.net)</div>
</body>
</html> |
為什麼沒有將右欄設定為80%，從而實現整體100%的效果？
這個問題的原因還得從對象的其它屬性說起，大家應該還記得，為了使布局在預覽中更清楚，我們使用了border屬性，使得兩個對象都具有1px的邊框，而在CSS布局中，一個對象的寬度，不僅僅由width值來決定，一個對象的真實寬度是由對象本身的寬、對象的左右邊距，以及左右邊框，還有內邊距這些屬性相加而成，因此左面的對象不僅僅是瀏覽器視窗的20%的寬度，還應該加上左邊的邊框的寬度。這樣算下來左右欄都超出了自身的百分比寬度，最終的寬度也超過了瀏覽器視窗的寬度，因此右欄將被擠掉第二行顯示，從而失去了左右分欄的效果，因此這裡使用了並非100%的寬度之和，而在實際應用之中，可以通過避免邊框及邊距的使用，而達到左右與瀏覽器填滿的效果。這樣一個有關寬度計算的問題，是CSS布局中相當重要的被稱為為盒模型的問題，在以後的教程中會詳細講解
兩列左列浮動，右列自適應寬度
採用左列 left 浮動，右列不浮動，採用 margin-left 定位的方式。此方法會有一個 ie6 3px bug . 另外，當瀏覽器框縮小到一定程度時，右側會掉下來。
| 代碼如下 |
複製代碼 |
<!DOCTYPE html>
<html>
<head>
<title>方法一</title>
<style type="text/css">
#left
{width:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;}
#right
{height:300px;margin-left:104px; border:2px solid #333;background:#ccc url(img/baidu_logo.gif) no-repeat;
}
</style>
</head>
<body>
<div id="left"> left </div>
<div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
</body>
</html> |
一起先來看看這個面試題的具體要求吧：
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>
。 方法二 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;
}
效果。 方法四： 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;
}
。 方法五： 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;
}
。 |
針對上面的面試題要求，我一共使用了五種不同的方法來實現，經過測試都能在各瀏覽器中運行，最後我有幾點需要特別提出：
1.上面所有DEMO中，要注意其方向性的配合，並且值要統一，如果您想嘗試使用自己布局需要的寬度值，請對照相關代碼環節進行修改；
2.上面所有DEMO中，沒有設定他們之間的間距，如果您想讓他們之間有一定的間距，有兩種方法可能實現，其一在上面的DEMO基礎上修改相關參數，其二，在相應的裡面加上"div"標籤，並設定其“padding”值，這樣更安全，不至於打破你的布局
3.因為我們這裡有一列使用了自適應寬度，在部分瀏覽器下，當瀏覽器螢幕拉至到一定的大小時，給我們帶來的感覺是自適應寬度那欄內容像是被隱藏，在你的實際項目中最好能在“body”中加上一個“min-width”的設定。
