将固定div设置为父容器的100％宽度

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/

Answer 1

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

Answer 2

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> 

Answer 3

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.

Answer 4

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/

Answer 5

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

Answer 6

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.

Answer 7

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;

}