理论篇

width:100%的相对于谁

 一般层级元素

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

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

存在浮动元素的层级关系

<style type="text/css">

.demo-child-float {float:left;}
</style>
<div class="demo-parent demo-parent-border">

<div class='demo-child demo-child-float'></div>
</div>

存在定位元素

<style type="text/css">

.pos-relative { position:relative;}

.pos-absolute { position:absolute;}
</style>
<div class="demo-parent demo-parent-border">

<div class='demo-child pos-relative'></div>
</div>

<div class="demo-parent demo-parent-border">

<div class='demo-child pos-absolute'></div>
</div>

<div class="demo-parent demo-parent-border pos-relative">

<div class='demo-child pos-absolute'></div>
</div>

1. 对于使用position:relative的子类元素而言，width:100%也始终是基于基父级元素而并不会基于其上层元素中的relative。
2. 对于绝对定位的子无素，要是其外层的所有元素中都没有用position:relative，则width:100%是基于body，否则就是离基最近的一个position:relative的元素。
3. 而对于position:fixed的元素，其一直是基于body,所以其宽度100%就是基于body。

width:100%好像是多余

width:100%在什么情况下使用不多余

1.  内层子元素必须为块级元素，才有可能出现宽度继承
2. 当父元素宽度确定，子元素不存在浮动，绝对定位，固定定位时，其宽度也能够很好的继承；相反，宽度会零（只有通过里面的内容把其撑开）。
3. 当父元素宽度不确定时（宽度是继承而来，或是用的相对单位），不会对继承造成什么影响。其仍然满足上面的1、2两条。

实践篇

灵活的两列式布局

<style type="text/css">

#main {min-width:60px;min-height:600px; background:#FEFF0A;padding-left:300px;}

#main-left {margin-left:-300px;width:300px;min-height:400px;background:#98FF1A;}

#main-right {min-height:400px;background:#7CC0FF;}

.float {float:left;}

.clear{clear:both: height : 0; line-height:0; font-size:0;}
</style>
<div id="main">

<div id="main-left"
class="float">

这个是左边部分，宽度确定

</div>

<div id="main-right">

这个是右边部分，宽度自动扩展

</div>

<div class="clear"></div>
</div>

<style type="text/css">

#main {min-width:60px;min-height:600px; background:#FEFF0A;padding-right:300px;}

#main-left {margin-right:-300px;width:300px;min-height:400px;background:#98FF1A;}

#main-right {min-height:400px;background:#7CC0FF;}

.float {float:right;}

.clear{clear:both: height : 0; line-height:0; font-size:0;}
</style>
<div id="main">

<div id="main-left"
class="float">

这个是右边部分，宽度确定

</div>

<div id="main-right">

这个是左边部分，宽度自动扩展

</div>

<div class="clear"></div>
</div>

<style type="text/css">

#main {width:100%;min-height:600px;background:#FEFF0A;}

#main-con {width:100%;min-height:500px; background:#8E8DCC;}

#main-con-left {margin-right:300px;min-height:400px;background:#98FF1A;}

#main-con-right {width:300px;margin-left:-300px;min-height:400px;background:#7CC0FF;}

.float { float:left;}

.clear {clear:both; font-size:0; height:0; line-height:0;}
</style>
<div id="main">

<div id="main-con" class="float">

<div id="main-con-left"></div>

</div>

<div id="main-con-right" class="float"></div>

<div class="clear"></div>
</div>

自适应的三列式布局

<style type="text/css">

#main {min-height:600px;background:#FEFF0A;padding:0 300px;}

#main-left { width:300px;min-height:400px; margin-left:-300px;float:left;background:#98FF1A;}

#main-center {min-height:400px;background:#8E8DCC;}

#main-right {min-height:400px; width:300px; margin-right:-300px; float:right;background:#7CC0FF;}

.clear {clear:both; height:0; line-height:0; font-size:0;}
</style>
<div id="main">

<div id="main-left"></div>

<div id="main-right"></div>

<div id="main-center"></div>

<div class="clear"></div>
</div>

小结

• 光看不练是没有多大意义的。你可以按照以上的思路来写一下，试一下，或许还有意外惊喜。
• 对于以上代码，在标准浏览器上面肯定是不存大的问题。但是你有没有想过，自适应部分里面的内容可能会把div撑大，导致布局变乱。其实，你在css加添加: #main-center img {max-width:80%;}
• 如果你的用户群中使用IE6的比例很高的话，你可能就要注意IE6浮动引起的双边距问题。
• 对于以上结构，还可以进行扩展。比如说到了手机等小分辨率屏幕上也能够有良好的用户体验。