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

我有一个带有一些填充的包装，然后有一个浮动的相对div，其宽度为百分比（40％）。

在浮动相对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;
}

这是强制性的小提琴：http : //jsfiddle.net/C93mk/489/

有人知道实现此目标的方法吗？

我已经修正了小提琴，以显示有关我要完成的工作的更多详细信息，对于造成的混乱，我们深表歉意： http : //jsfiddle.net/EVYRE/4/

您可以对.wrap容器使用margin，而对.wrapper使用padding：

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

怎么样这个？

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

通过使用jquery，您可以设置任何宽度：)

编辑：如梦中的评论所述，仅使用JQuery达到这种效果是没有意义的，甚至会适得其反。我为那些使用JQuery来处理页面上其他内容并考虑将其用于此部分的人制作了这个示例。不便之处，敬请原谅。

尝试向父级添加转换（不必执行任何操作，可以是零转换），然后将固定子级的宽度设置为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>

您可以使用绝对定位将页脚固定到父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/

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

但是当您使用position：fixed时，宽度基于视口（文档）宽度...

考虑一下，我意识到您的父元素具有10％的填充（左右），这意味着您的元素具有页面总宽度的80％。因此您的固定元素必须有40％（基于总宽度的80％）

所以您只需要将#fixed类更改为

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

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

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

我希望这会有所帮助，问候

在您最新的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*/
}

但是，这将如何解决您的问题？简单，让我们先解释为什么比预期更大。

#sidebar与其他固定元素一样，固定元素将使用窗口宽度大小作为基础来获得其自身的大小，一旦定义了该元素width:inherit并#sidebar_wrap具有40％的宽度值，则将计算window.width * 40%，然后如果窗口宽度大于您的窗口宽度.container宽度，#sidebar将大于#sidebar_wrap。

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

检查显示工作代码的jsfiddle，并更好地解释其工作方式。

删除Padding: 10%;或使用像素而不是百分比为.wrap

参见示例：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;

}