Set width of a Position fixed div relative to parent div

Question

I m trying to give a div  position  fixed  the width of 100   relating to it s parent div   But I ve got some problems     EDIT  The first problem is sovled by using inherit  but it still doesn t work  I think the problem is that I m using multiple divs that take the 100  inherit width  You can find the second problem on the jsfiddle update  http   jsfiddle net 4bGqF 7   Fox example   container       width  800px      fixed       position  fixed      width  100       and the html   lt div id  container  gt       lt div id  fixed  gt Sitename lt  div gt       lt p gt          blaat      lt  p gt   lt  div gt    Or you can try it out  http   jsfiddle net 4bGqF   The problems seems to be that the fixed element is always taking the width of the window document  Does anyone know how the fix this   I can t give my fixed element a fixed with  because I m using the jScrollPane plugin  It depends on the content whether there s a scrollbar or not   Thanks a lot   PS  The text of the 2 divs are on top of each other  This is just an example so that doesn t really matter

User · Answer

Use this CSS    container       width  400px      border  1px solid red      fixed       position  fixed      width  inherit      border  1px solid green      The  fixed element will inherit it s parent width  so it will be 100  of that

User · Answer

Fixed positioning is supposed to define everything in relation to the viewport  so position fixed is always going to do that  Try using position relative on the child div instead    I realize you might need the fixed positioning for other reasons  but if so - you can t really make the width match it s parent with out JS without inherit

User · Answer

I  m not sure as to what the second problem is  based on your edit   but if you apply width inherit to all inner divs  it works  http   jsfiddle net 4bGqF 9   You might want to look into a javascript solution for browsers that you need to support and that don  t support width inherit

User · Answer

Here is a little hack that we ran across while fixing some redraw issues on a large app   Use -webkit-transform  translateZ 0   on the parent  Of course this is specific to Chrome   http   jsfiddle net senica bCQEa   -webkit-transform  translateZ 0

User · Answer

This solution meets the following criteria   Percentage width is allowed on parent Works after window resize Content underneath header is never inaccessible   As far as I m aware  this criteria cannot be met without Javascript  unfortunately    This solution uses jQuery  but could also be easily converted to vanilla JS    x000D   x000D  function fixedHeader    x000D      this  width     wrapper   width     x000D        header-filler   height     header-fixed   outerHeight     x000D    x000D   x000D    window  resize function     x000D    fixedHeader    x000D      x000D   x000D  fixedHeader    x000D   header-fixed  x000D    position  fixed  x000D    background-color  white  x000D    top  0  x000D    x000D   header-filler  x000D    width  100   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  wrapper  gt  x000D   lt div id  header-fixed  gt  x000D    This is a nifty header  works even when resizing the window causing a line break x000D   lt  div gt  x000D   lt div id  header-filler  gt  lt  div gt  x000D   x000D   start fluff  lt br gt  x000D  a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt  x000D  a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt  x000D  a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt a lt br gt  x000D   end fluff  x000D   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

fixed position is a bit tricky  indeed impossible   but position  sticky is doing the trick beautifully    lt div class  container  gt     lt header gt This is the header lt  header gt     lt section gt          long lorem ipsum    lt  section gt   lt  div gt      body     text-align  center        container     text-align  left    max-width  30     margin  0 auto      header     line-height  2rem    outline  1px solid red    background   fff    padding  1rem     position  sticky    top  0       see the codepen sample

User · Answer

You can also solve it by jQuery   var new width       container   width        fixed   width new width      This was so helpful to me because my layout was responsive  and the inherit solution wasn t working with me

User · Answer

As many people have commented  responsive design very often sets width by    width inherit will inherit the CSS width NOT the computed width -- Which means the child container inherits width 100   But  I think  almost as often responsive design sets max-width too  therefore    container       width 100       max-width 800px     contained       position fixed      width inherit      max-width inherit      This worked very satisfyingly to solve my problem of making a sticky menu be restrained to the original parent width whenever it got  stuck   Both the parent and child will adhere to the width 100  if the viewport is less than the maximum width  Likewise  both will adhere to the max-width 800px when the viewport is wider   It works with my already responsive theme in a way that I can alter the parent container without having to also alter the fixed child element -- elegant and flexible  ps  I personally think it does not matter one bit that IE6 7 do not use inherit

User · Answer

There is an easy solution for this   I have used a fixed position for parent div and a max-width for the contents   You don t need to think about too much about other containers because fixed position only relative to the browser window     x000D   x000D          fixed  x000D              width 100   x000D              position fixed  x000D              height 100px  x000D              background  red  x000D            x000D   x000D           fixed  content  x000D              max-width  500px  x000D              background blue  x000D              margin  0 auto  x000D              text-align  center  x000D              padding  20px 0  x000D            x000D   lt div class  fixed  gt  x000D     lt div class  content  gt  x000D       This is my content x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You need to give the same style of the fixed element and its parent element  One of these examples is created with max widths and in the other example with paddings   x000D   x000D      x000D    box-sizing  border-box x000D    x000D  body   x000D    margin  0  x000D    x000D   container   x000D    max-width  500px  x000D    height  100px  x000D    width  100   x000D    margin-left  auto  x000D    margin-right  auto  x000D    background-color  lightgray  x000D    x000D   content   x000D    max-width  500px  x000D    width  100   x000D    position  fixed  x000D    x000D  h2   x000D    border  1px dotted black  x000D    padding  10px  x000D    x000D   container-2   x000D    height  100px  x000D    padding-left  32px  x000D    padding-right  32px  x000D    margin-top  10px  x000D    background-color  lightgray  x000D    x000D   content-2   x000D    width  100   x000D    position  fixed  x000D    left  0  x000D    padding-left  32px  x000D    padding-right  32px  x000D    x000D   lt div class  container  gt  x000D     lt div class  content  gt  x000D       lt h2 gt container with max widths lt  h2 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  container-2  gt  x000D     lt div class  content-2  gt  x000D       lt div gt  x000D         lt h2 gt container with paddings lt  h2 gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[jquery] Set width of a "Position: fixed" div relative to parent div

Examples related to jquery

Examples related to css

Examples related to jquery-plugins