Assigning CSS width to a position:fixed element

Question

I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside an outer div. In this scenario the % widths of each no longer match their parents width (e.g.,<body> tag) and the fixed element's width is based on something which is confusing me.

To better explain what I mean, contrast these two js fiddles:

here's the code for each:

<div id="fixed"></div>
<div id="content"></div>

#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

vs.

<div id="main">
   <div id="fixed"></div>
   <div id="content"></div>    
</div > 

#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
        height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}

Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I'm wondering how to correct the id="fixed" div such that its width also matches up with id="content" div.

Thoughts?

check edit below, only just saw the note about matching the widths. — CoreyRS
– CoreyRS, Commented Aug 25, 2012 at 3:03

d.k · Accepted Answer · 2012-08-25 03:02:25Z

5

You can to it this way FIDDLE (to set % relative to the #main) fixed element's dimensions always is calculated relative to the root element, so you need to reset %-unit accordingly in this particular case you need to set:

#fixed {
    width: 85.5%;
}

It is case #main is 95%, your static element is 90% relative to the main. So you need to calculate its width towards the root element (1 * .95 * .9 = .855)

edited Aug 25, 2012 at 3:02

answered Aug 25, 2012 at 2:54

d.k

4,5002 gold badges33 silver badges41 bronze badges

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

2 Comments

tim peterson Over a year ago

-@caligula, thanks so what you are saying is multiple the two percent widths (.95*.90=.85.5)?

Ralf Over a year ago

And you need to make sure you set object-fit correctly. I just had an image set to object-fit: cover; Size was messed up. Setting object-fit: contain; fixed it.

CoreyRS · Accepted Answer · 2012-08-25 03:03:42Z

4

Easy one my friend. Fixed width elements are yanked from their parents and are now relative in width to the window, so in both situations the fixed div is always relative to the size of the window, but when in a parent container with a width other than 100% the fixed element will remain relative to the window width but the non-fixed position element is now relative to the parent width. So the non-fixed element became 90% of the 95% of the window while the fixed element remained a constant 90% of the window only.

Edit:

If you wish to match the widths you can use jquery like this:

$(function(){
    $('#fixed').width($('#content').outerWidth());
});

edited Aug 25, 2012 at 3:03

answered Aug 25, 2012 at 2:57

CoreyRS

2,2673 gold badges26 silver badges44 bronze badges

1 Comment

Adam Waite Over a year ago

No way to do this using just CSS without having to get the calculator out? I hate doing JS style manipulation.

authentictech · Accepted Answer · 2023-07-19 12:56:34Z

0

In modern CSS, the width of #fixed can be calculated using the following:

#fixed {    
  width: calc(100vw * (0.95 * 0.9));  /* or just use 100vw * 0.855 */
}

You would still need to know the width to which the other element is set (i.e. it won't automatically update the width of #fixed if the matching element width CSS value is changed) but at least there's no need to get out the calculator.

answered Jul 19, 2023 at 12:56

authentictech

5627 silver badges27 bronze badges

Collectives™ on Stack Overflow

Assigning CSS width to a position:fixed element

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related