獲取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來填補剩餘寬度

回答

相關問題