CSS3的calc()函数无法与position属性的fixed或absolute值一起使用

Question

有人知道这个问题的解决方法吗？

我正在尝试计算一个 div 的宽度：

#container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: none;
    background: #fff;
    width: calc(100% - 1em);
    padding: .5em;
}    

- Morpheus

---

我无法回答你的问题，但请注意，如果您发布您的代码并详细说明您的问题，那么帮助您会更加容易。 - Simon Carlson

Answer 1

编辑2：

这是针对Webkit浏览器（如评论所要求）的版本，经过最新版Chrome测试，完全可用：http://jsfiddle.net/HvVst/1/

使用了-webkit-calc()代替了calc()。

---

编辑：然后您需要将1像素边框减去0.5em填充，像这样：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;
}

---

它适用于position fixed/absolute，但是（如果没有为绝对定位指定相对父级，则始终适用于fixed），它是基于窗口宽度而不是容器宽度。

（100％ - 1em）= 窗口宽度除去滚动条的100％...

你想要实现什么？

如果你想让绝对定位在父级边界内，将父级设置为position:relative...

- Andrea Ligios

---

我希望那个 div 的宽度为 100％，并且我需要减去 1em 的内边距，这样它就不会溢出页面。同时，它也需要固定在页面顶部。在这种情况下，设置父元素的相对位置是没有意义的。 - Morpheus

看起来 WebKit 浏览器不支持这个。谢谢！附言：很抱歉，我还是新手，无法给你点赞。 - Morpheus

抱歉，我用Firefox测试了它，你没有提到“Webkit浏览器” :) 对于Webkit浏览器，只需使用“-webkit-calc(100% - 1em);”代替“calc(100% - 1em);”，并对每个使用calc()的地方进行替换。 您无法投票，但如果您认为这是正确的答案，则仍然可以标记为接受的答案。 - Andrea Ligios

我已经尝试了-webkit-calc()，但没有成功。希望不久的将来它会得到支持 :) 现在可以使用jQuery来帮助。 - Morpheus

嗯…你正在使用什么？我没有安装Chrome或Safari，所以我不能尝试，但是你可以在这里测试-webkit-calc：http://peter.sh/files/calc.html。 也许它不完全支持减法，但对我来说这似乎很奇怪。 - Andrea Ligios

我已经编辑了答案，我用Chrome测试过了，它可以正常工作 :) - Andrea Ligios