確定位置：在CSS上以像素爲單位固定div動態寬度

Question

我使用position:fixed < div創建了一個簡單標記div >具有兩個超鏈接的標頭。接下來，我希望該div動態匹配頁面內容的寬度。

這裏的問題是頁面內容的尺寸是由像素中設置的主體元素的填充控制的。

這裏是描述的情況小提琴：http://jsfiddle.net/jn7z1wke/2/

谷歌搜索說，固定元素的寬度可以以百分比動態控制（如它在小提琴width: 95%;顯示，但不解決我的問題 - 我需要固定div的寬度以像素爲單位進行動態調整

我完全知道如何做到這一點的JS/JQuery的，但最終我想這樣做，在普通CSS

Answer 1

你可以使用calc()。減去填充3210。

Updated Example

.fixedheader { 
    position: fixed; 
    background: none repeat scroll red; 
    width: calc(100% - 40px); 
} 

爲calc()瀏覽器支持可以看出here。

---

另外，剛剛成立right:20px/left:20px：

Example Here

.fixedheader { 
    position: fixed; 
    background: none repeat scroll red; 
    right:20px; 
    left:20px; 
} 

Answer 2

SET padding: 0px 2.5%;身體 - DEMO

.fixedheader{ 
    position: fixed; 
    background: none repeat scroll red; 
    width: 95%; /* this has to be changed and match the width of the .content on window resize */ 
} 

.content{ 
    background: none repeat scroll 0% 0% #A0A2A7; 
    padding-top: 20px; 
} 

body 
{ 
    margin: 0; 
    padding: 0 2.5%; 
    background: none repeat scroll 0% 0% #C2BAC1; 
}