轉載：CSS裏面div寬度的問題

轉自http://www.lyblog.net/detail/286.html

小天地，大世界[http://www.lyblog.net]

從剛開始接觸CSS到如今，通常用的單位都是像素這種絕對的單位。簡單方便，並且還不容易出現一些莫名其妙的問題。優勢聽起來不錯，缺點也仍是不少的，比 如說：頁面缺少靈活性，自適應性不強······ 那麼有什麼好的解決方法嗎？有，不過咱仍是把範圍縮小，就放在width:100%個這相對單位上來看看。

理論篇

width:100%的相對於誰

想必學過CSS，瞭解了相對單位的童鞋們都應該知道：相對單位於都有一個基準。那麼width:100%是基於誰呢？ 我把可能出現的幾種狀況列在下面，並以DEMO說明，在最後進行總結。

 通常層級元素

複製

1. <style type="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-child {width:100%;height:30px;background:pink;}
4. </style>
5. <div class="demo-parent">
6. <div class='demo-child'></div>
7. </div>

下面咱們把上面的demo-aprent中加入padding,margin,border值

複製

1. <style type="text/css">
2. .demo-parent {width:400px;height:60px;line-height:30px;background:blue;}
3. .demo-parent-margin {margin:10px;}
4. .demo-parent-padding {padding:10px;}
5. .demo-parent-border {border:5px solid #FF486B;}
6. .demo-child {width:100%;height:30px;background:pink;}
7. </style>
8. <div class="demo-parent demo-parent-padding">
9. <div class='demo-child'></div>
10. </div>

對於以上的加入過程以後的圖以下，你能夠從中獲得什麼結論呢？ [caption id="attachment_288" align="aligncenter" width="600"] width:100% DEMO效果[/caption] 經過以上，咱們就能夠得知：對於不存在其它關係的嵌套，width:100%是直接基於父級DIV的寬度（寬度要指定）。

存在浮動元素的層級關係

複製

1. <style type="text/css">
2. .demo-child-float {float:left;}
3. </style>
4. <div class="demo-parent demo-parent-border">
5. <div class='demo-child demo-child-float'></div>
6. </div>

得出的結論同上。

存在定位元素

複製

1. <style type="text/css">
2. .pos-relative { position:relative;}
3. .pos-absolute { position:absolute;}
4. </style>
5. <div class="demo-parent demo-parent-border">
6. <div class='demo-child pos-relative'></div>
7. </div>

對於以上結構中，外層div是使用的默認的，而內層div使用相對定位，而width:100%也只基於基父級。請繼續看以下代碼：

複製

1. <div class="demo-parent demo-parent-border">
2. <div class='demo-child pos-absolute'></div>
3. </div>

外層div使用默認的定位方式，而裏層div使用的是絕對定位，而些時你會發現絕對定位的div寬度爲body元素同寬，也就是說其基於body,或html元素（其實這個也很容易理解：由於position:absolute是基於body元素來進行定位的）。

複製

1. <div class="demo-parent demo-parent-border pos-relative">
2. <div class='demo-child pos-absolute'></div>
3. </div>

由上一個例子，咱們知道了position:absolute是基於body元素，而當給上層div一個position:relative時，它就成了width:100%的基準點了。 小結論：

1. 對於使用position:relative的子類元素而言，width:100%也始終是基於基父級元素而並不會基於其上層元素中的relative。
2. 對於絕對定位的子無素，要是其外層的全部元素中都沒有用position:relative，則width:100%是基於body，不然就是離基最近的一個position:relative的元素。
3. 而對於position:fixed的元素，其一直是基於body,因此其寬度100%就是基於body。

width:100%好像是多餘

若是你對CSS繼承關係比較瞭解的話，你可能就知道上面的「width:100%」可能就是不句多餘的話，而且不使用時，效果可能更好。好比最上面的那張 圖片上「只設置padding」時，要不使用width:100%就不會出現難看的溢出。那麼width:100%合適在何時使用呢？

width:100%在什麼狀況下使用很少餘

咱們要弄清楚何時合適使用，那咱們就要弄清楚它在何時多餘。說白了就是width何時會自動繼承。如下是個人總結：

1.  內層子元素必須爲塊級元素，纔有可能出現寬度繼承
2. 當父元素寬度肯定，子元素不存在浮動，絕對定位，固定定位時，其寬度也可以很好的繼承；相反，寬度會零（只有經過裏面的內容把其撐開）。
3. 當父元素寬度不肯定時（寬度是繼承而來，或是用的相對單位），不會對繼承形成什麼影響。其仍然知足上面的一、2兩條。

實踐篇

既然上面說了，到底知道了這些又有什麼用呢！不知道你有沒有注意到有些網站在水平方向上，永遠都是滿屏幕，不會出現水平滾動條。那麼這些靈活的佈局是怎麼實現的呢？

靈活的兩列式佈局

不少時候，你可能有種需求：整個網頁爲整個網頁寬度，在主體部分分爲兩列，其中左邊部分寬度自動擴展，而右邊部分寬度固定。那麼，這一類的佈局方式如何實現呢？你徹底能夠這樣。。。

複製

1. <style type="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}
3. #main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float {float:left;}
6. .clear{clear:both: height : 0; line-height:0; font-size:0;}
7. </style>
8. <div id="main">
9. <div id="main-left" class="float">
10. 這個是左邊部分，寬度肯定
11. </div>
12. <div id="main-right">
13. 這個是右邊部分，寬度自動擴展
14. </div>
15. <div class="clear"></div>
16. </div>

那麼，要是咱們想在右邊寬度固定，而左邊寬度自適應，又如何呢？

複製

1. <style type="text/css">
2. #main {min-width:60px;min-height:600px; background:#FEFF0A;padding-right:300px;}
3. #main-left {margin-right:-300px;width:300px;min-height:400px;background:#98FF1A;}
4. #main-right {min-height:400px;background:#7CC0FF;}
5. .float {float:right;}
6. .clear{clear:both: height : 0; line-height:0; font-size:0;}
7. </style>
8. <div id="main">
9. <div id="main-left" class="float">
10. 這個是右邊部分，寬度肯定
11. </div>
12. <div id="main-right">
13. 這個是左邊部分，寬度自動擴展
14. </div>
15. <div class="clear"></div>
16. </div>

請注意看上面CSS有變更的地方。 或許你還能夠這樣來。。。

複製

1. <style type="text/css">
2. #main {width:100%;min-height:600px;background:#FEFF0A;}
3. #main-con {width:100%;min-height:500px; background:#8E8DCC;}
4. #main-con-left {margin-right:300px;min-height:400px;background:#98FF1A;}
5. #main-con-right {width:300px;margin-left:-300px;min-height:400px;background:#7CC0FF;}
6. .float { float:left;}
7. .clear {clear:both; font-size:0; height:0; line-height:0;}
8. </style>
9. <div id="main">
10. <div id="main-con" class="float">
11. <div id="main-con-left"></div>
12. </div>
13. <div id="main-con-right" class="float"></div>
14. <div class="clear"></div>
15. </div>

對於以上的幾種方式，都有優缺點。可能在實際使用時還要是對其進行相應的處理，以保證佈局不亂。

自適應的三列式佈局

如今，咱們在以上基礎上進行擴展。要求是：網頁鋪滿屏幕，主體部分分爲3列，左右兩列寬度固定，中間一列寬度自適應。實現代碼以下：

複製

1. <style type="text/css">
2. #main {min-height:600px;background:#FEFF0A;padding:0 300px;}
3. #main-left { width:300px;min-height:400px; margin-left:-300px;float:left;background:#98FF1A;}
4. #main-center {min-height:400px;background:#8E8DCC;}
5. #main-right {min-height:400px; width:300px; margin-right:-300px; float:right;background:#7CC0FF;}
6. .clear {clear:both; height:0; line-height:0; font-size:0;}
7. </style>
8. <div id="main">
9. <div id="main-left"></div>
10. <div id="main-right"></div>
11. <div id="main-center"></div>
12. <div class="clear"></div>
13. </div>

固然對於以上三列式佈局，咱們也能夠經過內嵌div的方式來進行擴展，在這裏我就不給出源碼了。

小結

• 光看不練是沒有多大意義的。你能夠按照以上的思路來寫一下，試一下，或許還有意外驚喜。
• 對於以上代碼，在標準瀏覽器上面確定是不存大的問題。可是你有沒有想過，自適應部分裏面的內容可能會把div撐大，致使佈局變亂。其實，你在css加添加: #main-center img {max-width:80%;}
• 若是你的用戶羣中使用IE6的比例很高的話，你可能就要注意IE6浮動引發的雙邊距問題。
• 對於以上結構，還能夠進行擴展。好比說到了手機等小分辨率屏幕上也可以有良好的用戶體驗。