CSS3 calc（）不适用于固定位置/绝对位置

我试图计算一个div的宽度：

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

来源

2012-10-29 Morpheus

我不能回答你的问题，但请注意，这是一个更容易帮助你，如果你发布你的代码并详细说明你的问题。 –

编辑2：

这是版本的Webkit浏览器（如询问意见），与最新的Chrome测试版本，并且完全为我工作：http://jsfiddle.net/HvVst/1/

使用-webkit-calc()而不是calc()。

编辑：然后，你必须减去1px的边框到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; 
}

它适用于固定位置/绝对位置，但是（如果没有亲属父母指定为绝对位置，且始终为固定位置），它指的是窗口宽度，而不是容器宽度。

（100％ - 1EM）=不包括滚动条窗口的100％......

什么是你想达到什么目的？

如果你想在父母的界限绝对位置，设置父位置：相对...

来源

2012-10-29 12:59:25

我想这div是100％的宽度，我需要减去1em的填充，所以它不会溢出身体，如果这是有道理的。它也必须修复，因为我希望它位于页面的顶部。在这种情况下，将父元素设置为相对位置没有意义。 – Morpheus

它看起来像webkit浏览器不适用于此。谢谢！附：对不起，我在这里新来的时候不能投票给你答案。 – Morpheus

对不起，我用Firefox测试过，你没有提到“Webkit浏览器”:) 对于webkit浏览器，只需使用“-webkit-calc（100％ - 1em）;”而不是“calc（100％ - 1em）;”，对每个使用的calc（）进行替换。如果您认为这是正确的答案，则您无法投票，但仍可以标记为“已接受的答案”。 –

CSS3 calc（）不适用于固定位置/绝对位置

回答

相关问题