CSS秘密花園： 流體背景，固定內容
《 CSS Secrets 》是 @Lea Verou 最新著作，這本書講解了有關于CSS中一些小秘密。是一本CSSer值得一讀的一本書，經過一段時間的閱讀，我、@南北和@彥子一起將在W3cplus發布一系列相關的讀后感，與大家一起分享。
問題
在過去的幾年中，有種網頁設計趨熱是越來越受歡迎：這就是我所說的“自適應的背景，固定寬度的內容”。這種模型常用于以下幾種場景中：
- 有多個內容部分 <section> ,每個內容都占據整個視窗寬度而且都有不同的背景。
- 固定寬度的內容，即使寬度會根據不同的媒體查詢修改。在某些情況之下，不同的區域 <section> 會有不同的內容寬度
有時候整個網站都是由這種風格組成，如下圖所示：
更微妙點的如下圖：
特定的區域使用這種模式的要屬頁腳，使用最頻繁：
完成這樣的效果最常見的方法就是使用兩個元素，一個用于流體的背景，另一個用于固定寬度的內容。后者使用 margin: auto ，讓內容保持水平居中。例如，頁腳的區域，他的結構如下：
<footer>
<div class="wrapper">
<!-- 這里放頁腳的內容 -->
</div>
</footer>
CSS通常這樣寫：
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
看上去是不是很熟悉。大多數網頁設計師或者開發人員都寫過類似的代碼。添加額外的標簽元素是問題爭執所在，或者說我們使用現代的CSS能不能避免添加額外的標簽元素？
解決方案
讓我們思考一下這個例子中使用的 margin:auto 。這個 margin 的值等于視窗一半的寬度減去頁面內容一半寬度值。因為視窗寬度我們不知道他具體有多大的值，所以他的一半寬度只能用百分比來計算(假設其祖先元素沒有顯式的設置寬度)，在這個示例中，可以使用 50% - 450px 來表達。在 CSS Values and Units Level 3 定義了一個 calc() 函數，允許我們做一些簡單的數學表達式運算。通過 calc() 可以來替代 auto 值，此時, .wrapper 樣式變成：
.wrapper {
max-width: 900px;
margin: 1em calc(50% - 450px);
}
使用 margin:auto 讓固定內容元素居中，唯一的原因是不得不用第二個容器來包裹內容。然而，現在使用 calc() 來替代 auto 。 calc() 只是另一個CSS長度值，而且任何接受長度值的屬性都可以使用。這也意味著，如果我們想要，我們現在可以將其運用其父元素的 padding 值上：
footer {
max-width: 900px;
padding: 1em calc(50% - 450px);
background: #333;
}
.wrapper {}
警告：別忘了，在 calc() 中表達式的運算符之間要用空格符隔開，否則將會出錯。這是一個非常奇怪的規則，主要原因是向前兼容，或許在未來， calc() 可以識別標識符，甚至也可以包含連字符。
正如你所見，通過這樣方式的處理， .wrapper 容器的沒有任何CSS代碼，這意味著我們不需要了，也可以放心的從結構中刪除這個容器元素。現在已經達到我們需要的風格，而且沒有多余的HTML標簽出現。那么我們還可以進一步改善它嗎？像往常一樣，這個問題的答案是肯定的。
請注意，如果我們把 width 樣式注釋掉，其實什么也不會發生。無論視窗大小，視覺上的效果完全相同。那是為什么呢？因為 padding 的值是 50% - 450px ,其有效空間始終沒離開 900px （ 2 × 450px ），只有寬度是 900px 以外，不管是更大還是更小，我們才能看到不同效果。但 900px 是我們得到的可用空間，所以它是多余的，我們可以直接刪除它。
如果我們做一下改進，可以提高向后兼容性，通過添加一個備用的 padding ，這樣一來，當瀏覽器不支持 calc() 屬性，至少還會有一些內距的填充：
footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}
就是這樣簡單，我們只使用了三行CSS代碼，而且沒有添加額外的HTML標簽，就實現了一個靈活的，干凈的，可向后兼容的流體背景，固定寬度內容的效果。
來自： http://www.w3cplus.com/css3/css-secrets/fluid-background-fixed-content.html