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   lt div id  wrapper  gt     lt div id  wrap  gt      Some relative item placed item      lt div id  fixed  gt  lt  div gt     lt  div gt   lt  div gt    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

User · Answer

Remove Padding  10   or use px instead of percent for  wrap  see the example   http   jsfiddle net C93mk 493   HTML     lt div id  wrapper  gt       lt div id  wrap  gt      Some relative item placed item      lt div id  fixed  gt  lt  div gt       lt  div gt   lt  div gt    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

User · Answer

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    x000D   x000D  body  height 20000px   x000D   wrapper  padding 10    x000D   wrap   x000D      float  left  x000D      position  relative  x000D      width  40    x000D      background  ccc   x000D      transform  translate 0  0   x000D    x000D   fixed   x000D      position fixed  x000D      width 100   x000D      padding 0px  x000D      height 10px  x000D      background-color  333  x000D    x000D   lt div id  wrapper  gt  x000D       lt div id  wrap  gt  x000D      Some relative item placed item x000D       lt div id  fixed  gt  lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css