相对于父div设置"Position: div“div的宽度
我试图给一个div (position: div)一个100%的宽度(与它的父div相关)。但我有一些问题...
编辑：通过使用inherit解决了第一个问题，但它仍然不起作用。我认为问题在于我使用了多个div，这些div的宽度为100%/inherit。您可以在jsfiddle更新中找到第二个问题： 。
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:两个div的文本都在彼此的顶部。这只是一个例子，所以这并不重要。
回答 11
Stack Overflow用户
发布于 2011-05-04 03:02:02
我不确定第二个问题是什么(基于您的编辑)，但如果您将width:inherit应用于所有内部div，它将起作用：http://jsfiddle.net/4bGqF/9/
您可能需要考虑针对需要支持但不支持width:inherit的浏览器的javascript解决方案
Stack Overflow用户
发布于 2016-08-16 06:49:58
正如许多人评论的那样，响应式设计通常将宽度设置为%
width:inherit将继承CSS width，而不是计算宽度 --这意味着子容器继承width: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一点也不重要
Stack Overflow用户
发布于 2019-05-17 13:11:43
固定位置有点棘手(实际上是不可能的)，但position: sticky做得很好：
<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;
}https://stackoverflow.com/questions/5873565
复制相似问题