获取DIV来填补剩余宽度

我试图使用CSS来得到一个DIV，以填补剩余的页面宽度，左侧固定宽度的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>

（头部和DOCTYPE这里不再赘述）呈现时，主要的div仍然是满的页面宽度，这意味着右击左手边缘离浏览器右边缘200px。我如何获得主要的div来填充剩余的宽度？

（最终我想要把其他的div内主，并在相对％表示到主分区它们的宽度）

这甚至可能吗？

来源

2012-11-21 NickJ

请勿使用职位。使用花车。浮动左边的“左”div，设置其宽度。给“主”div一个左边div宽度的左边距，并将宽度设置为auto。

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

这里举例：http://jsfiddle.net/GhtHp/1/

来源

2012-11-21 18:30:37

注意，这会导致'＃main'到201px的页面溢出到右侧 – GiantDuck

@GiantDuck对不起，#main的宽度应设置为自动。我修正了我的例子 –

'宽度：自动'是好的，除非内部div小于全宽;如果他们的宽度以百分比表示，那么问题就出现了。：/ – GiantDuck

这是否完成你在找什么？

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/

来源

2012-11-21 18:31:11

是的，它很容易可能的CSS钙。不幸的是，到目前为止，CSS只支持Chrome。

这里有一个更好的办法：
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}

有从左边0像素从右边#main恰好为200px为您提供了完整的宽度减去#left

来源

2012-11-21 18:36:38 GiantDuck

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

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

DEMO

来源

2012-11-21 18:45:49

获取DIV来填补剩余宽度

回答

相关问题