将固定的div设置为父容器的100％宽度
我有一些填充包装，然后我有一个百分比宽度（40％）浮动相对股利。
在浮动的相对div内，我有一个固定的div，我希望它的父母的大小相同。 我知道一个固定的div从文档stream中被移除，因此忽略了包装的填充。
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容器的余量代替.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
这个怎么样？
$( document ).ready(function() { $('#fixed').width($('#wrap').width()); });
通过使用jQuery，你可以设置任何种类的宽度:)
编辑：正如在评论中的梦所述，使用JQuery只是为了这个效果是毫无意义的，甚至反作用。 我为那些在他们的页面上使用JQuery来处理其他东西的人做了这个例子，并且考虑在这部分中使用它。 对于我的回答造成的不便，我表示歉意。
您可以使用绝对定位将页脚钉在父div的底部。 我也添加了10px的填充底部到换行（匹配页脚的高度）。 绝对定位是相对于父div而不是在stream之外，因为您已经给它定位了相对属性。
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; }
在你最新的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宽度时， .container会比#sidebar_wrap 。
这样，您必须在#sidebar_wrap设置最大宽度，以防止大于#sidebar_wrap 。
检查这个jsfiddle显示一个工作代码，并更好地解释这是如何工作的。
man你的容器是父元素宽度的40％
但是当你使用position：fixed时，宽度是基于viewport（document）的宽度的…
思考，我意识到你的父母元素有10％的填充（左和右），这意味着你的元素有80％的总页面宽度。 所以你的固定元素必须有40％，基于总宽度的80％
所以你只需要改变你的#fixed类
#fixed{ position:fixed; width: calc(80% * 0.4); height:10px; background-color:#333; }
如果使用sass，postcss或其他css编译器，则可以使用variables来避免在更改父元素的填充值时破坏布局。
这里是更新的小提琴http://jsfiddle.net/C93mk/2343/
我希望它有帮助，问候
删除Padding: 10%; 或者使用px代替.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; }
