css3 固定,CSS3 calc()不适用于固定位置/绝对位置
編輯2:
這是版本的Webkit瀏覽器(如詢問意見),與最新的Chrome測試版本,并且完全為我工作:http://jsfiddle.net/HvVst/1/
使用-webkit-calc()而不是calc()。
編輯:然后,你必須減去1px的邊框到0.5em填充,這樣的: http://jsfiddle.net/HvVst/
HTML:
FIXED HEADER
normal div
Sample Text 1
Sample Text 2
Sample Text 3
Sample Text 4
Sample Text 5
Sample Text 6
Sample Text 7
Sample Text 8
CSS:
#banner{
position: fixed;
top: 0;
left: 0;
z-index: 9;
background: #fff;
width: calc(100% - 1em);
padding: calc(0.5em - 1px); /*
border: 1px solid red;
height: 50px;
}
#main{
margin-top: calc(50px + 1em);
border: 1px solid blue;
height: 500px;
}
它適用于固定位置/絕對位置,但是(如果沒有親屬父母指定為絕對位置,且始終為固定位置),它指的是窗口寬度,而不是容器寬度。
(100% - 1EM)=不包括滾動條窗口的100%......
什么是你想達到什么目的?
如果你想在父母的界限絕對位置,設置父位置:相對...
總結
以上是生活随笔為你收集整理的css3 固定,CSS3 calc()不适用于固定位置/绝对位置的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 读《redis设计与实现》笔记--red
- 下一篇: Leetcode--300. 最长上升子