jQuery 设置“位置：固定”div 相对于父 div 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5873565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set width of a "Position: fixed" div relative to parent div
提问by Dnns
I'm trying to give a div (position: fixed) the width of 100% (relating to it's parent div). But I've got some problems...
我试图给一个 div（位置：固定）100% 的宽度（与它的父 div 相关）。但是我遇到了一些问题...
EDIT: The first problem is sovled by using inherit, but it still doesn't work. I think the problem is that I'm using multiple divs that take the 100%/inherit width. You can find the second problem on the jsfiddle update: http://jsfiddle.net/4bGqF/7/
编辑： 第一个问题是通过使用继承解决的，但它仍然不起作用。我认为问题在于我使用了多个采用 100%/继承宽度的 div。您可以在 jsfiddle 更新中找到第二个问题：http: //jsfiddle.net/4bGqF/7/
Fox example
狐狸的例子
#container {
width: 800px;
}
#fixed {
position: fixed;
width: 100%;
}
and the html
和 html
<div id="container">
<div id="fixed">Sitename</div>
<p>
blaat
</p>
</div>
Or you can try it out: http://jsfiddle.net/4bGqF/
或者你可以尝试一下：http: //jsfiddle.net/4bGqF/
The problems seems to be that the fixed element is always taking the width of the window/document. Does anyone know how the fix this?
问题似乎是固定元素总是占用 window/document 的宽度。有谁知道如何解决这个问题？
I can't give my fixed element a fixed with, because I'm using the jScrollPane plugin. It depends on the content whether there's a scrollbar or not.
我不能给我的固定元素一个固定的，因为我使用的是 jScrollPane 插件。这取决于内容是否有滚动条。
Thanks a lot!
非常感谢！
PS: The text of the 2 divs are on top of each other. This is just an example so that doesn't really matter.
PS：2个div的文字是在彼此之上的。这只是一个例子，所以这并不重要。
采纳答案by jeroen
I′m not sure as to what the second problem is (based on your edit), but if you apply width:inheritto all inner divs, it works: http://jsfiddle.net/4bGqF/9/
我不确定第二个问题是什么（根据您的编辑），但如果您适用width:inherit于所有内部 div，它就可以工作：http: //jsfiddle.net/4bGqF/9/
You might want to look into a javascript solution for browsers that you need to support and that don′t support width:inherit
您可能想为需要支持和不支持的浏览器研究 javascript 解决方案 width:inherit
回答by aequalsb
As many people have commented, responsive design very often sets width by %
正如许多人评论的那样，响应式设计经常将宽度设置为 %
width:inheritwill inherit the CSS widthNOT the computed width-- Which means the child container inherits width:100%
width:inherit将继承CSS 宽度而不是计算宽度——这意味着子容器继承width:100%
But, I think, almost as often responsive design sets max-widthtoo, therefore:
但是，我认为，响应式设计集max-width也几乎同样频繁，因此：
#container {
width:100%;
max-width:800px;
}
#contained {
position:fixed;
width:inherit;
max-width:inherit;
}
This worked very satisfyingly to solve my problem of making a sticky menu be restrained to the original parent width whenever it got "stuck"
这非常令人满意地解决了我在“卡住”时将粘性菜单限制为原始父宽度的问题
Both the parent and child will adhere to the width:100%if the viewport is less than the maximum width. Likewise, both will adhere to the max-width:800pxwhen the viewport is wider.
width:100%如果视口小于最大宽度，则父级和子级都将遵循。同样，max-width:800px当视口更宽时，两者都将坚持。
It works with my already responsive theme in a way that I can alter the parent container without having to also alter the fixed child element -- elegant and flexible
它与我已经响应的主题一起工作，我可以改变父容器而不必改变固定的子元素——优雅而灵活
ps: I personally think it does not matter one bit that IE6/7 do not use inherit
ps：我个人觉得IE6/7不使用一点也无所谓 inherit
回答by Multicam
fixed position is a bit tricky (indeed impossible), but position: sticky is doing the trick beautifully:
固定位置有点棘手（确实不可能），但是 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;
}
回答by Multicam
You can also solve it by jQuery:
也可以通过jQuery解决：
var new_width = $('#container').width();
$('#fixed').width(new_width);
This was so helpful to me because my layout was responsive, and the inheritsolution wasn't working with me!
这对我很有帮助，因为我的布局是响应式的，而且inherit解决方案对我不起作用！
回答by banrobert
Use this CSS:
使用这个 CSS：
#container {
width: 400px;
border: 1px solid red;
}
#fixed {
position: fixed;
width: inherit;
border: 1px solid green;
}
The #fixed element will inherit it's parent width, so it will be 100% of that.
#fixed 元素将继承它的父宽度，因此它将是 100%。
回答by Thomas Shields
Fixed positioning is supposed to define everything in relation to the viewport, so position:fixedis always going to do that. Try using position:relativeon the child div instead.
(I realize you might need the fixed positioning for other reasons, but if so - you can't really make the width match it's parent with out JS without inherit)
固定定位应该定义与视口相关的所有内容，因此position:fixed总是要这样做。尝试position:relative在子 div 上使用。（我意识到您可能出于其他原因需要固定定位，但如果是这样的话-如果没有 JS，您就无法真正使宽度匹配它的父级inherit）
回答by Senica Gonzalez
Here is a little hack that we ran across while fixing some redraw issues on a large app.
这是我们在修复大型应用程序上的一些重绘问题时遇到的一个小技巧。
Use -webkit-transform: translateZ(0);on the parent. Of course this is specific to Chrome.
-webkit-transform: translateZ(0);在父级上使用。当然，这是特定于 Chrome 的。
http://jsfiddle.net/senica/bCQEa/
http://jsfiddle.net/senica/bCQEa/
-webkit-transform: translateZ(0);
回答by Sab Devadasan
There is an easy solution for this.
对此有一个简单的解决方案。
I have used a fixed position for parent div and a max-width for the contents.
我为父 div 使用了一个固定位置，为内容使用了一个最大宽度。
You don't need to think about too much about other containers because fixed position only relative to the browser window.
您无需过多考虑其他容器，因为固定位置仅相对于浏览器窗口。
.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>回答by Skeets
This solution meets the following criteria
此解决方案满足以下条件
- Percentage width is allowed on parent
- Works after window resize
- Content underneath header is never inaccessible
- 父级允许百分比宽度
- 调整窗口大小后工作
- 标题下的内容永远无法访问
As far as I'm aware, this criteria cannot be met without Javascript (unfortunately).
据我所知，没有 Javascript 就无法满足这个标准（不幸的是）。
This solution uses jQuery, but could also be easily converted to vanilla JS:
此解决方案使用 jQuery，但也可以轻松转换为 vanilla 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>回答by Evgeniy
Here is the trick I've used.
这是我使用的技巧。
E.g. I had this HTML:
例如我有这个 HTML：
<div class="head">
<div id="fx">123</div>
</div>
and to make #fxfixed inside .head, so the workaround is to add an additional div as a container for #fxwith position:absolute like this:
并#fx在 .head 内部进行固定，因此解决方法是添加一个额外的 div 作为#fxwith position:absolute的容器，如下所示：
<div class="head">
<div class="area_for_fix">
<div id="fx">123</div>
</div>
</div>
Here is the CSS:
这是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;
}
Important: to not set topand leftfor #fx, set these attributes on .area_for_fix.
重要提示：要不设置top和left为#fx，设置这些属性.area_for_fix。
