Сделать позицию: фиксированная div динамическая ширина в пикселях на CSS

Question

Я создал простую разметку с position:fixed <div> заголовок, который имеет две гиперссылки. Затем я хочу, чтобы div динамически соответствовал ширине содержимого страницы.

Проблема заключается в том, что размеры содержимого страницы контролируются заполнением элемента body, установленного в пикселях.

Вот скрипка, которая описывает ситуацию: http://jsfiddle.net/jn7z1wke/2/

Googling говорит, что ширина неподвижного элемента может контролироваться динамически в процентах (как это показано на скрипке width: 95%;, но это не решает мою проблему - Мне нужна ширина фиксированной DIV динамически регулируется в пикселях

Я прекрасно знаю, как это сделать на JS/JQuery, но в конечном счете, я хочу сделать это на простой CSS

Answer 1

Вы можете использовать calc().. для вычитания 40px прокладки.

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; 
}