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

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

我有一个带有一些填充的包装器，然后有一个浮动的相对div，具有百分比宽度(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.

在浮动相对div中，我有一个固定的div，我希望它的大小和它的父div一样。我理解从文档流中删除了一个固定的div，因此忽略了包装器的填充。

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/

这里是必备的小提琴: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/

我已经修改了fiddle，以显示关于我正在尝试完成的内容的更详细的内容，抱歉出现了混乱:http://jsfiddle.net/EVYRE/4/

7 个解决方案

#1

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

你可以为.wrap容器使用空白，而不是为.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

#2

How about this?

这个怎么样?

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

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

通过使用jquery，您可以设置任何类型的宽度:)

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.

编辑:正如dream在评论中所说，仅仅为了达到这个效果而使用JQuery是没有意义的，甚至会适得其反。我为在页面上使用JQuery的人做了这个例子，并考虑在这部分中使用JQuery。我对给您带来的不便表示歉意。

#3

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.

您可以使用绝对定位来将页脚定位到父div的基础上。我还添加了10px的划底到包装(匹配页脚的高度)。绝对定位是相对于父div而不是流之外的，因为您已经给出了位置相对属性。

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/

#4

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%

尝试向父节点添加一个转换(不需要做任何事情，可以是零转换)，并将固定子节点的宽度设置为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>

#5

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

在你最新的jsfiddle上，你错过了一件事:

#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.

固定元素#边栏将使用窗口宽度大小作为基础来获得它自己的大小，就像其他所有固定元素一样，一旦这个元素定义了宽度:继承和#sidebar_wrap有40%的值作为宽度，然后将计算窗口。宽度* 40%，那么当窗口宽度大于.container宽度时，#侧栏将大于#sidebar_wrap。

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

这样，您必须在#sidebar_wrap中设置一个最大宽度，以防止大于#sidebar_wrap。

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

检查显示工作代码的jsfiddle，并更好地解释它是如何工作的。

#6

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

你的容器是父元素宽度的40%

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

但是当你使用position:fixed时，宽度是基于viewport(文档)宽度…

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

考虑一下，我发现您的父元素有10%的填充(左和右)，这意味着您的元素有80%的页面宽度。所以你的固定元素必须有40%基于80%的总宽度。

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.

如果您使用sass、postcss或其他css编译器，您可以使用变量来避免在更改父元素的填充值时破坏布局。

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

更新的小提琴http://jsfiddle.net/C93mk/2343/

i hope it helps, regards

我希望它能有所帮助，亲爱的

#7

-3

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

删除填充:10%;或者用px代替百分号。wrap

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

参见示例:http://jsfiddle.net/C93mk/493/

HTML :

HTML:

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

CSS:

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;

}

#1