寬度：100％的位置是：絕對（CSS）

Question

如果你這樣做：

<div style="width:auto;background:red;color:white">test</div> 

你得到拉伸以填充整個屏幕寬度（100％），一個div。

這就是我需要發生的事情。

但是，我也需要設置起始位置。所以我需要位置：絕對。

當我添加位置：絕對，div的寬度只與內部的內容一樣寬（類似於浮動）。有沒有辦法解決？

我不能簡單地指定寬度：因爲這個100％不採取在考慮邊界大小等。

感謝， 韋斯利

Answer 1

當我添加position：absolute時，div的寬度只有 的寬度..（類似於浮點數）。有沒有辦法圍繞 這個？

我不能簡單地指定寬度：100％，因爲這不採取 考慮邊界大小等。

你可以使用position:absolute; left:0; right:0; top:0。

像這樣：http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

可以使用寬度：100％和CSS屬性框大小，以獲得像IE 5.5一樣的框模型，即填充和邊框計入寬度。

div.absolute { 
    width: 100%; 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; top: 100px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 50px; 
} 

這裏有一個小提琴：http://jsfiddle.net/dJtm2/

警惕不過，因爲它是一個相對較新的CSS3屬性，只會在新的瀏覽器工作，因爲你可以從我的例子中看到需要可怕適得其反的措施即供應商前綴。

Answer 3

簡單地寫這樣的：

div.absolute { 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; 
    top: 100px; 
    padding: 50px; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/dJtm2/1/

在此 padding & border

不增加元件的寬度。