CSS3 calc() doesn't work with position fixed/absolute - css

Question

Does anyone know a workaround for this?
I'm trying to calculate width of a div :
#container {
position: fixed;
top: 0;
left: 0;
z-index: 9;
display: none;
background: #fff;
width: calc(100% - 1em);
padding: .5em;
}

Answer 1

EDIT 2:
This is the version for Webkit browsers (as asked in comments), tested with the latest release of Chrome, and fully working for me: http://jsfiddle.net/HvVst/1/
used -webkit-calc() instead of calc().
EDIT: Then you have to subtract the 1px borders to the 0.5em padding, like this:
http://jsfiddle.net/HvVst/
HTML:
<div id="banner">
FIXED HEADER
</div>
<div id="main">
normal div
<br/>
Sample Text 1
<br/>
Sample Text 2
<br/>
Sample Text 3
<br/>
Sample Text 4
<br/>
Sample Text 5
<br/>
Sample Text 6
<br/>
Sample Text 7
<br/>
Sample Text 8
</div>
CSS:
#banner{
position: fixed;
top: 0;
left: 0;
z-index: 9;
background: #fff;
width: calc(100% - 1em);
padding: calc(0.5em - 1px); /* <-- THIS ONE !!*/
border: 1px solid red;
height: 50px;
}
#main{
margin-top: calc(50px + 1em);
border: 1px solid blue;
height: 500px;
}
It works with position fixed/absolute, but (if no relative parents specified for absolute, and always for fixed) it refers to the window width, not to the container width.
(100% - 1em) = 100% of the window excluding the scrollbar...
what are you trying to achieve ?
If you want position absolute in the parent's boundaries, set the parent to position:relative...