Set a Fixed div to 100% width of the parent container

Question

I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).

Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/

Does anyone know of a way to accomplish this?

I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion: http://jsfiddle.net/EVYRE/4/

score 42 · Accepted Answer · answered Jul 23 '13 at 10:12

42

You can use margin for .wrap container instead of padding for .wrapper:

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

answered Jul 23 '13 at 10:12

YD1m

5,845
2
19
23

Updated my fiddle to better explain what I am doing: http://jsfiddle.net/EVYRE/4/ – Jack Murdoch Jul 23 '13 at 12:53
@JackMurdoch, the only way i find without js is in using `calc` for `right` and `left` properties. Look at [jsfiddle](http://jsfiddle.net/EVYRE/5/) – YD1m Jul 23 '13 at 13:28
This would not work when the wrapper is shrunk below the max-width (600px in the example), but I believe you are right it cannot be done outside of javascript. Thanks for the help. – Jack Murdoch Jul 23 '13 at 13:58
5

it doesn't really works, look at this fiddle http://jsfiddle.net/EVYRE/4/. The #sidebar width would be relative to his parent (#sidebar_wrap), but it's not, and it overflows his parent. – mlb Jul 04 '14 at 15:34
I think this only works because there is only one div between the fixed element and the window. This wouldn't work if the fixed element is nested many times over in elements that aren't 100% of the window width – Jay May 24 '16 at 16:34
If you use the wrapper as a % width of the window you can alter @YD1m's version ever so slightly http://jsfiddle.net/4bmerpb3/ – Robbie Smith Jun 21 '16 at 18:19
@mlb to prevent of fixed block get bigger than its parent you just need specify `max-width` on fixed block, check this [answer](http://stackoverflow.com/a/40075266/4658613) for correct explanation. – Vagner Oct 16 '16 at 20:55

score 9 · Answer 2 · answered Dec 12 '17 at 15:09

Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

In my case, adding transform cancelled effect of position:fixed. — mikiqex, Jul 22 '21 at 09:46

Hristo Valkanov · Answer 3 · 2013-07-23T10:50:53.457

2

How about this?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

By using jquery you can set any kind of width :)

EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.

edited Jul 23 '13 at 10:50

answered Jul 23 '13 at 09:58

Hristo Valkanov

1,689
22
33

"Inside the floating relative div I have a fixed div which I would like the same size as its parent" - Inside the "#wrap" he has '#fixed' which he likes to have the same size as the '#wrap' div(height is already set so i didn't change it). Please explain me which part of it I didn't get? And which part of the result differs from the other answers? – Hristo Valkanov Jul 23 '13 at 10:17
2

Hey buddy, no offence . actually the question was to provide a answer in css, for which you introduced jQuery, which should have been suggestion than answer. – dreamweiver Jul 23 '13 at 10:25
I know I even upvoted the other solution with the margins, but i don't see why can't anyone place a jquery solution. Imagine if 5-6 months from now someone finds this question via google and considers the jquery solution more appropriate for his case? – Hristo Valkanov Jul 23 '13 at 10:29
1

I agree your solution is perfect in terms of jquery scope but not in plain css. when i`m not using Jquery lib, do you expect me to use it just becuase i found a simple solution in jquery like you have posted.a Jquery lib file is of 32 KB zipped / 91.6 KB (production mode) / 252 KB (development mode).its really not feasable for one to use jQuery lib, if its not worth. one possible disadvantage of jQuery or key point in terms of performance on the site – dreamweiver Jul 23 '13 at 10:42
Just because the internet is full of sites containing only 1 floating relative div and 1 fixed div... He provided a part of code, where is your 100% proof that he, or anybody else who will eventually look at this page will not use jquery for anything else? I do agree with you that Using jquery just for this is pointless, but you cover 1 particular case and ignore all others... not cool man, not cool... – Hristo Valkanov Jul 23 '13 at 10:48
ha ha ha, unless and until one says he is using jquery or he has tagged jquery in his question we cant assume something dude :) you really cant take this seriously man.just because jQuery is famous , it doesnt mean all sites should compulsorily have it :) there are sites which work only on CSS3 these days :) – dreamweiver Jul 23 '13 at 11:12
Making the mistake evident on your question revokes your down vote. Happy Coding :) – dreamweiver Jul 23 '13 at 11:14
4

This breaks if you resize the window. Now you have to do onresize calculations, cool, sounds expensive. nty – Jay May 24 '16 at 16:30

score 2 · Answer 4 · answered Dec 01 '16 at 17:50

man your container is 40% of the width of the parent element

but when you use position:fixed, the width is based on viewport(document) width...

thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width

so you just need to change your #fixed class to

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.

here is the updated fiddle http://jsfiddle.net/C93mk/2343/

i hope it helps, regards

score 1 · Answer 5 · answered Jul 23 '13 at 11:15

You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

I tried this initially but the problem is that when you scroll it moves along with rest of the divs, thus it's not really the behavior of fixed positioning — ThinkBonobo, Jul 29 '16 at 18:52

score 0 · Answer 6 · answered Oct 16 '16 at 20:46

On top of your lastest jsfiddle, you just missed one thing:

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

But, how this will solve your problem? Simple, lets explain why is bigger than expect first.

Fixed element #sidebar will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit and #sidebar_wrap has 40% as value in width, then will calculate window.width * 40%, then when if your window width is bigger than your .container width, #sidebar will be bigger than #sidebar_wrap.

This is way, you must set a max-width in your #sidebar_wrap, to prevent to be bigger than #sidebar_wrap.

Check this jsfiddle that shows a working code and explain better how this works.

score -3 · Answer 7 · answered Jul 23 '13 at 10:01

-3

Remove Padding: 10%; or use px instead of percent for .wrap

see the example : http://jsfiddle.net/C93mk/493/

HTML :

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS:

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}

answered Jul 23 '13 at 10:01

Mohammad Masoudian

3,483
7
27
45

he needs width to be a percentage on the #wrap. but you have put a fixed with. – Achintha Samindika Jul 23 '13 at 10:12
This is the same thing as setting the width of the fixed element manually, and does not help at all – Jay May 24 '16 at 16:31

Set a Fixed div to 100% width of the parent container

HTML

CSS

7 Answers7

Linked