在CSS上使位置:固定div动态宽度(以像素为单位)

时间:2014-08-31 19:45:40

标签: html css fixed

我使用position:fixed< div>创建了一个简单的标记标头有两个超链接。接下来我希望div能够动态匹配页面内容的宽度。

这里的问题是页面内容的尺寸是通过以像素为单位设置的body元素的填充来控制的。

以下是描述情况的小提琴:http://jsfiddle.net/jn7z1wke/2/

谷歌说,固定元素的宽度可以动态控制百分比(就像它在小提琴width: 95%;中所示,但这并不能解决我的问题 - 我需要固定div的宽度为动态调整像素。

我完全知道如何在JS / JQuery上做到这一点,但最终我想在纯CSS上做到这一点。

2 个答案:

答案 0 :(得分:3)

您可以使用calc()减去填充的40px

Updated Example

.fixedheader {
    position: fixed;
    background: none repeat scroll red;
    width: calc(100% - 40px);
}

calc()可以看到here的浏览器支持。


或者,只需设置right:20px / left:20px

Example Here

.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;
}