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仍然是整页宽度，这意味着右边缘距浏览器右边缘200px。如何让主div填充剩余的宽度？

（最终我想把其他div放在main中，并使它们的宽度以％相对于主div表示）

这甚至可能吗？

Answer 1

不要使用位置。使用浮动。向左浮动“左”div，设置其宽度。为“main”div赋予左div宽度的左边距，并将宽度设置为auto。

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

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

Answer 2

不要使用被认为是邪恶的定位，而只使用浮动。

#left {float:left; width:200px; background:#ccffcc;}    
#main {margin-left:200px; background:#ffcccc;}

DEMO

Answer 3

这是否能实现您的目标？

HTML -

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

CSS -

div {
    border: 1px solid black;
}

#left {
    float: left;
}

Jsfiddle - http://jsfiddle.net/xzWK5/

Answer 4

是的，CSS计算很容易实现。不幸的是，到目前为止，Chrome仅支持CSS calc。

这是一个更好的方法：
HTML：

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

CSS：

#header{height: 100px; width: 100%; background:#ccccff}
#main{position: absolute; left: 200px; right: 0; background:#ffcccc}
#left{width: 200px; left: 0}

左边的#main正好是200px，右边的是0px，这样可以得到全宽减去#left

获取DIV以填充剩余宽度

4 个答案: