Question

有人知道解决方法吗？

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

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

Answer 1

编辑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％...

你想要实现什么目标？

如果您想在父级边界中保持绝对位置，请将父级设置为位置：relative ...

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

1 个答案: