css - 获取 DIV 以填充剩余宽度

Question

我正在尝试使用 CSS 获取一个 DIV 来填充剩余的页面宽度，在左侧的固定宽度 div 之后(在固定高度的标题下方)

我的 CSS 是:

body{margin:0;padding:0}
#header{height: 100px; background:#ccccff;}
#left {position:absolute; left:0; top:100px; width:200px; background:#ccffcc;}
#main {position:relative; left:200px; background:#ffcccc;} 

HTML 是:

<div id="header">Header stuff here</div>    
<div id="left">Left stuff here</div>    
<div id="main">Main stuff here</div>

(为简洁起见，此处省略了 head 和 doctype)呈现时，主 div 仍然是整个页面宽度，这意味着右手边缘距离浏览器右边缘 200 像素。如何让主 div 填充剩余的宽度？

(最终我会想把其他的div放在主div中，并使它们的宽度以相对于主div的%表示)

这可能吗？

Answer 1

不要使用位置。使用 float 。将“左”div 向左浮动，设置其宽度。给“main”div 一个左侧 div 宽度的左边距，并将宽度设置为 auto。

#left { float: left; width: 200px;}
#main {margin-left: 201px; width: auto;}

此处示例:http://jsfiddle.net/GhtHp/1/