固定寬度但帶有CSS3的可變背景

有時，我需要將頁面的部分限制爲固定寬度。但背景應該擴展所有可用空間。固定寬度但帶有CSS3的可變背景

隨着CSS2我以前做這樣的事情（的jsfiddle：http://jsfiddle.net/fniwes/wwVp4/）

CSS：

#container { background-color: #ddd; } 
#content { width: 300px; margin: 0 auto; }

HTML：

<div id="container"> 
    <div id="content">All the content inside container should be limited to 300px but the background should cover all the screen width</div> 
</div>

這裏的內容只是一個簡單的文本，但它通常是更復雜的東西。

有沒有更好的方式來完成同樣的結果沒有額外的#content標記？我不介意使用CSS3或者只有Chrome或Firefox支持的內容。

只是爲了澄清。我想刪除#content標記。我想要標記是

<div id="container"> 
    All the content bla bla 
</div>

（我想樣式不超過#container的其他標籤..也許這是不可能的，但也許有在CSS3或其他建議新的東西，我不知道）

來源

2013-12-18 Fernando

有CSS3中的鈣（）函數，你可以使用這樣的：

#container { background-color: #ddd; padding-left: calc(50% - 150px); padding-right:calc(50% - 150px);}

來源

2013-12-18 07:49:44 hdomos

好的解決方案！大多數瀏覽器都支持calc（）：http://caniuse.com/#feat=calc，但有時需要-webkit-前綴。 – Willem

是否有任何具體的原因，你反對使用容器div？你可以這樣做：

#content { background-color: #ddd; width: 100%; margin: 0; padding: 0 50%; }

但我不會reccomend它，最好的解決辦法仍然是用集裝箱

來源

2013-12-18 02:50:36 jmore009

原因是因爲我想學習更好的方法去做有時因爲技術原因而受限制的事情，而其他人只是無知而已。實際上，我使用容器，但每次我只是爲了佈局目的而添加標籤時，我覺得我做錯了什麼。（特別是當同一問題在不同項目中發生多次時）。順便說一句。你的解決方案不會保持300px的寬度，它只是使內容在容器中間開始。 – Fernando

是的，我意識到這一點，那是因爲據我所知，沒有辦法創建一個可以伸展100％的div，但也可以將內容限制在固定的像素寬度。使用額外的div作爲容器沒有任何問題，這不是一個壞習慣。 – jmore009

固定寬度但帶有CSS3的可變背景

回答

相關問題