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

css, css-position

Solution

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...

Problem

Original source