4

有谁知道这个的解决方法?

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

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

1 回答 1

5

编辑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% 的窗口,不包括滚动条...

你想达到什么目的?

如果您想在父级边界中定位绝对位置,请将父级设置为 position:relative...

于 2012-10-29T12:59:25.850 回答