我试图给一个div（位置：固定）100％的宽度（相对于它的父div）。但我遇到了一些问题...
编辑： 第一个问题用inherit解决了，但是还是不行。我认为问题是我使用了多个采用 100%/继承宽度的 div。 您可以在 jsfiddle 更新上找到第二个问题：http://jsfiddle.net/4bGqF/7/
狐狸的例子
#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的文本彼此重叠。这只是一个例子，所以并不重要。
马塞勒斯
Horatio says 'tis but our fantasy,
And will not let belief take hold of him
Touching this dreaded sight, twice seen of us:
Therefore I have entreated him along
With us to watch the minutes of this night;
That if again this apparition come,
He may approve our eyes and speak to it.
霍雷肖
Tush, tush, 'twill not appear.
贝尔纳多
Sit down awhile;
And let us once again assail your ears,
That are so fortified against our story
What we have two nights seen.
霍雷肖
Well, sit we down,
And let us hear Bernardo speak of this.
贝尔纳多
Last night of all,
When yond same star that's westward from the pole
Had made his course to illume that part of heaven
Where now it burns, Marcellus and myself,
The bell then beating one,--
Enter Ghost
马塞勒斯
Peace, break thee off; look, where it comes again!
贝尔纳多
In the same figure, like the king that's dead.
固定位置有点棘手（实际上不可能），但位置：粘性很好地完成了这个任务：
<div class='container'>
<header>This is the header</header>
<section>
... long lorem ipsum
</section>
</div>
body {
text-align: center;
}
.container {
text-align: left;
max-width: 30%;
margin: 0 auto;
}
header {
line-height: 2rem;
outline: 1px solid red;
background: #fff;
padding: 1rem;
position: sticky;
top: 0;
}
正如许多人评论的那样，响应式设计经常按 % 设置宽度
width:inheritwidth:100%但是，我认为，响应式设计也几乎同样频繁地设置
max-width#container {
width:100%;
max-width:800px;
}
#contained {
position:fixed;
width:inherit;
max-width:inherit;
}
这非常令人满意地解决了我的问题，即每当粘性菜单“卡住”时将其限制为原始父级宽度
如果视口小于最大宽度，父级和子级都将遵循
width:100%max-width:800px它与我已经响应的主题配合使用，我可以更改父容器，而不必更改固定的子元素 - 优雅且灵活
ps：我个人觉得IE6/7不用一点也没关系
inherit使用这个CSS：
#container {
width: 400px;
border: 1px solid red;
}
#fixed {
position: fixed;
width: inherit;
border: 1px solid green;
}
#fixed 元素将继承其父级宽度，因此它将是其父级宽度的 100%。
也可以通过jQuery解决：
var new_width = $('#container').width();
$('#fixed').width(new_width);
这对我很有帮助，因为我的布局是响应式的，而
inherit固定定位应该定义与视口相关的所有内容，因此
position:fixedposition:relativeinherit这是我们在修复大型应用程序上的一些重绘问题时遇到的一个小技巧。
在父级上使用
-webkit-transform: translateZ(0);http://jsfiddle.net/senica/bCQEa/
-webkit-transform: translateZ(0);
对于 jquery 的粘性标题，我仍然是 jquery 的学习者，这些 css 设置有效。
header.sticky{
position: fixed;
border-radius: 0px;
max-height: 70px;
z-index: 1000;
width: 100%;
max-width: inherit;
}
header 位于最大宽度为 1024 的包装 div 内。
有一个简单的解决方案。
我对父 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>该解决方案满足以下标准
据我所知，如果没有 Javascript，这个标准就无法满足（不幸的是）。
此解决方案使用 jQuery，但也可以轻松转换为普通 JS：
function fixedHeader(){
$(this).width($("#wrapper").width());
$("#header-filler").height($("#header-fixed").outerHeight());
}
$(window).resize(function() {
fixedHeader();
});
fixedHeader();#header-fixed{
position: fixed;
background-color: white;
top: 0;
}
#header-filler{
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>
[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]
</div>您需要给固定元素与其父元素相同的样式。其中一个示例是使用最大宽度创建的，而另一个示例是使用填充创建的。
* {
box-sizing: border-box
}
body {
margin: 0;
}
.container {
max-width: 500px;
height: 100px;
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: lightgray;
}
.content {
max-width: 500px;
width: 100%;
position: fixed;
}
h2 {
border: 1px dotted black;
padding: 10px;
}
.container-2 {
height: 100px;
padding-left: 32px;
padding-right: 32px;
margin-top: 10px;
background-color: lightgray;
}
.content-2 {
width: 100%;
position: fixed;
left: 0;
padding-left: 32px;
padding-right: 32px;
}<div class="container">
<div class="content">
<h2>container with max widths</h2>
</div>
</div>
<div class="container-2">
<div class="content-2">
<div>
<h2>container with paddings</h2>
</div>
</div>
</div>