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（）不适用于固定位置/绝对位置相关推荐

CSS3中的calc( )属性
作用: calc() 函数用于动态计算长度值其实,calc()这个形式看起来就很容易让人想到Javascript里的函数,当然他不是js里的函数,但是他有着类似函数的功能,可以用来计算,括号里是一个 ...
css3 中的calc用法
定义与用法 calc() 函数用于动态计算长度值. 1.需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 2.任何长度值都可以使用calc()函数 ...
CSS3计算样式 calc()
calc() 计算 var() 引用变量 --varxxx :root{ --globalVarxx:100px; 申明 html全局变量 } :root{ --win ...
常见的网站布局方式---左固定右自适应、左右固定中自适应等
偶尔看到的一篇博文,觉得挺有用的,刚好前两天做项目的时候自己也遇到这个问题,觉得解决方案很好,所以搞过来,大家一起学习一起进步! 左边定宽.右边自适应(类似管理台) 方案一左边设置左浮动,右边宽度设 ...
ie9 css过大,CSS 3后台大小不适用于IE9(CSS 3 background-size not working on IE9)
CSS 3后台大小不适用于IE9(CSS 3 background-size not working on IE9) background-image:url(yellow.jpg); backgro ...
自用的快速复习Java基础知识，不适用于每一个人
自用的快速复习java基础知识,不适用于每一个人问题背景 1. 类定义出来的变量称为**对象** [IDEA安装](https://www.jb51.net/article/193853.htm) ...
为什么传统的基于硬件的频谱分析仪不适用于当今的频谱监测—介绍软件定义的频谱分析
导言无线通信技术已成为当今信息驱动世界的重要组成部分.在如此依赖它的情况下,很容易忘记仅仅几十年前频谱环境的不同之处.这一转变也使频谱监测要求远远超出了以前的标准. 但是,虽然频谱的使用继续发展,用 ...
高度固定，行数不固定的文字垂直居中问题
大家都知道,水平方向上的居中很好做到,text-align:center即可做到:垂直方向上的居中如果文字行数和高度都固定也很好实现,但是如果行数不固定呢? 最近,接到一个需求:高度固定,文字行数可能 ...
此更新不适用您的计算机 win10,高手亲自讲解Win10系统提示此更新不适用于您的详尽处理办法...
大家都知道,我们生活中离不开电脑,在使用电脑的过程可能就会碰到Win10系统提示此更新不适用于您的问题,见过Win10系统提示此更新不适用于您这样问题的用户其实不是很多,也就没有相关的解决经验.我们来 ...

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

css3 固定,CSS3 calc（）不适用于固定位置/绝对位置相关推荐

最新文章

热门文章