Make position:fixed div dynamic width in pixels on CSS

Question

I created a simple markup with position:fixed <div> header that has two hyperlinks. Next I want that div to dynamically match the width of the content of the page.

The problem here is that the dimensions of the page's content are controlled by padding of the body element that is set in pixels.

Here is the fiddle that describes the situation: http://jsfiddle.net/jn7z1wke/2/

Googling says that the width of the fixed element could be controlled dynamically in percents (like it is shown in the fiddle width: 95%; but that doesn't solve my problem - I need the width of the fixed div to be dynamically adjusted in pixels.

I perfectly know how to do that on JS/JQuery but ultimately I want to do that on plain CSS.

Josh Crozier · Accepted Answer · 2014-08-31 20:01:20Z

3

You could use calc() to subtract the 40px of padding.

Updated Example

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

Browser support for calc() can be seen here.

Alternatively, just set right:20px/left:20px:

Example Here

.fixedheader {
    position: fixed;
    background: none repeat scroll red;
    right:20px;
    left:20px;
}

edited Aug 31, 2014 at 20:01

answered Aug 31, 2014 at 19:47

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

xenn_33 Over a year ago

both options work in my production. calc(100%-40px) is a very nice lifehack though :)

Anonymous · Accepted Answer · 2014-08-31 19:51:30Z

2

SET padding: 0px 2.5%; to body - 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;
}

answered Aug 31, 2014 at 19:51

Anonymous

10.2k3 gold badges27 silver badges39 bronze badges

1 Comment

Josh Crozier Over a year ago

That works, but I think the OP wants the padding on the body element to be set in px units also, not percentages.

Collectives™ on Stack Overflow

Make position:fixed div dynamic width in pixels on CSS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related