我使用position:fixed
< div>创建了一个简单的标记标头有两个超链接。接下来我希望div能够动态匹配页面内容的宽度。
这里的问题是页面内容的尺寸是通过以像素为单位设置的body元素的填充来控制的。
以下是描述情况的小提琴:http://jsfiddle.net/jn7z1wke/2/
谷歌说,固定元素的宽度可以动态控制百分比(就像它在小提琴width: 95%;
中所示,但这并不能解决我的问题 - 我需要固定div的宽度为动态调整像素。
我完全知道如何在JS / JQuery上做到这一点,但最终我想在纯CSS上做到这一点。
答案 0 :(得分:3)
您可以使用calc()
减去填充的40px
。
.fixedheader {
position: fixed;
background: none repeat scroll red;
width: calc(100% - 40px);
}
或者,只需设置right:20px
/ left:20px
:
.fixedheader {
position: fixed;
background: none repeat scroll red;
right:20px;
left:20px;
}
答案 1 :(得分:2)
将padding: 0px 2.5%;
设为正文 - DEMO
.fixedheader{
position: fixed;
background: none repeat scroll red;
width: 95%; /* this has to be changed and match the width of the .content on window resize */
}
.content{
background: none repeat scroll 0% 0% #A0A2A7;
padding-top: 20px;
}
body
{
margin: 0;
padding: 0 2.5%;
background: none repeat scroll 0% 0% #C2BAC1;
}