有谁知道这个的解决方法?
我正在尝试计算 div 的宽度:
#container {
position: fixed;
top: 0;
left: 0;
z-index: 9;
display: none;
background: #fff;
width: calc(100% - 1em);
padding: .5em;
}
有谁知道这个的解决方法?
我正在尝试计算 div 的宽度:
#container {
position: fixed;
top: 0;
left: 0;
z-index: 9;
display: none;
background: #fff;
width: calc(100% - 1em);
padding: .5em;
}
编辑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...