设置相对于父div的“Position：fixed”div的宽度
我想给一个div（position：fixed）100％的宽度（与它的父div有关）。 但是我有一些问题
编辑： 第一个问题是通过使用inheritance，但它仍然无法工作。 我认为问题是，我使用多个div取100％/inheritance宽度。 你可以在jsfiddle更新中find第二个问题： http : //jsfiddle.net/4bGqF/7/
Fox例子
#container { width: 800px; } #fixed { position: fixed; width: 100%; } 和HTML
<div id="container"> <div id="fixed">Sitename</div> <p> blaat </p> </div>
或者你可以试试看： http : //jsfiddle.net/4bGqF/
问题似乎是固定的元素总是取窗口/文档的宽度 。 有谁知道如何解决这个问题？
我不能给我的固定元素一个固定的，因为我使用jScrollPane插件。 这取决于是否有滚动条的内容。
非常感谢！
PS：2个div的文字是相互重叠的。 这只是一个例子，所以这并不重要。
我不确定第二个问题是什么（基于你的编辑），但是如果你应用width:inherit所有内部div，它的工作原理： http : //jsfiddle.net/4bGqF/9/
您可能需要查看一个您需要支持的浏览器的javascript解决scheme，并且不支持width:inherit
使用这个CSS：
#container { width: 400px; border: 1px solid red; } #fixed { position: fixed; width: inherit; border: 1px solid green; }
#fixed元素将inheritance它的父宽度，所以它将是100％。
正如很多人所评论的那样，响应式devise通常会以％
width:inherit将inheritanceCSS宽度不计算宽度 – 这意味着子容器inheritancewidth:100%
但是，我认为，几乎同样经常响应的devise也设置max-width …因此…
#container { width:100%; max-width:940px; } #contained { position:fixed; width:inherit; max-width:inherit; }
这解决了我的问题，使粘滞的菜单被限制到原来的父宽度，每当它“卡住”
如果视口小于最大宽度，则父级和子级都将遵守width:100% 。
当视口更宽时，两者都将保持max-width:940px 。
它以一种非常令人满意的方式与我已经响应的主题一起工作 我可以改变父容器，而不必改变固定的子元素 – 优雅和灵活
个人说明：IE6＆7没有使用inherit这对我来说不是问题，因为我为客户分开过时的向后兼容。
你也可以通过jQuery来解决它：
var new_width = $('#container').width(); $('#fixed').width(new_width);
这对我来说非常有帮助，因为我的布局非常敏感，而且inherit解决scheme并不适合我！
固定位置应该定义与视口有关的所有东西，所以position:fixed总是会这样做的。 尝试使用position:relative ，在子div。 （我意识到你可能需要其他原因的固定定位，但如果是这样 – 你不能真正使宽度匹配它的父母与JS没有inherit ）
这是一个小的黑客，我们遇到了一些大的应用程序修复一些重绘问题。
使用-webkit-transform: translateZ(0); 在父母身上。 当然这是特定于Chrome的。
http://jsfiddle.net/senica/bCQEa/
-webkit-transform: translateZ(0);
这是我用过的把戏。
例如，我有这个HTML：
<div class="head"> <div id="fx">123</div> </div>
并使#fx固定在.head中，所以解决方法是添加一个额外的div作为#fx的容器，位置：绝对像这样：
<div class="head"> <div class="area_for_fix"> <div id="fx">123</div> </div> </div>
这是CSS：
.head{ min-width:960px; width:960px; nax-width:1400px; height:300px; border: 1px solid #000; **position:relative;** margin:0 auto; margin-top:50px; padding:20px; text-align:right; height:1500px; } .area_for_fix{ **position:absolute;** right:0; width:150px; height:200px; background-color:red; } #fx{ width:150px; height:75px; background-color:#ccc; **position:fixed;** }
重要提示 ：为了不设置top和left的#fx ，请在.area_for_fix上设置这些属性。
注意： position:fixed似乎并没有在right方向上打好。 如果你的元素的原始CSS是position:absolute; right:0; position:absolute; right:0; 并且通过脚本将位置更改为固定位置，则还应该设置right:auto并以另一种方式定位元素（如果希望它保留在包含元素的宽度内）。
我意识到这并不直接解决原来问题中的小提琴，但希望对解决相同基本问题的人有帮助。
这是一个简单的解决scheme。
我已经使用了父div的固定位置和内容的最大宽度。
您不需要考虑其他容器太多，因为固定的位置只是相对于浏览器窗口。
.fixed{ width:100%; position:fixed; height:100px; background: red; } .fixed .content{ max-width: 500px; background:blue; margin: 0 auto; text-align: center; padding: 20px 0; }
<div class="fixed"> <div class="content"> This is my content </div> </div>
