Html 将固定 div 设置为父容器的 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17806852/
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 a Fixed div to 100% width of the parent container
提问by Hyman Murdoch
I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).
我有一个带有一些填充的包装器，然后我有一个具有百分比宽度（40%）的浮动相对 div。
Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.
在浮动相对 div 内，我有一个固定的 div，我希望它的大小与其父级相同。我知道从文档流中删除了一个固定的 div，因此忽略了包装器的填充。
HTML
HTML
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS
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;
}
Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/
这是强制性小提琴：http: //jsfiddle.net/C93mk/489/
Does anyone know of a way to accomplish this?
有谁知道实现这一目标的方法？
I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion:http://jsfiddle.net/EVYRE/4/
我已经修改了小提琴以显示我正在尝试完成的更多细节，抱歉造成混乱：http : //jsfiddle.net/EVYRE/4/
采纳答案by YD1m
You can use margin for .wrap container instead of padding for .wrapper:
您可以使用 .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;
}
回答by Hristo Valkanov
How about this?
这个怎么样？
$( document ).ready(function() {
$('#fixed').width($('#wrap').width());
});
By using jquery you can set any kind of width :)
通过使用 jquery，您可以设置任何类型的宽度 :)
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
编辑：正如dream 在评论中所说的那样，仅仅为了这种效果而使用JQuery 是毫无意义的，甚至会适得其反。我为那些将 JQuery 用于其页面上的其他内容并考虑将其用于这一部分的人制作了这个示例。对于我的回答给您带来的任何不便，我深表歉意。
回答by Wojtek Kochanowski
Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%
尝试向父级添加转换（不必做任何事情，可能是零转换）并将固定子级的宽度设置为 100%
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 40%;
background:#ccc;
transform: translate(0, 0);
}
#fixed{
position:fixed;
width:100%;
padding:0px;
height:10px;
background-color:#333;
}<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>回答by LuizAsFight
man your container is 40% of the width of the parent element
男人你的容器是父元素宽度的 40%
but when you use position:fixed, the width is based on viewport(document) width...
但是当您使用位置：固定时，宽度基于视口（文档）宽度...
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
考虑一下，我意识到您的父元素有 10% 的填充（左右），这意味着您的元素具有总页面宽度的 80%。所以你的固定元素必须有 40% 基于总宽度的 80%
so you just need to change your #fixed class to
所以你只需要改变你的 #fixed 类
#fixed{
position:fixed;
width: calc(80% * 0.4);
height:10px;
background-color:#333;
}
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
如果您使用 sass、postcss 或其他 css 编译器，您可以使用变量来避免在更改父元素的填充值时破坏布局。
here is the updated fiddle http://jsfiddle.net/C93mk/2343/
这是更新的小提琴http://jsfiddle.net/C93mk/2343/
i hope it helps, regards
我希望它有帮助，问候
回答by MattP
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
您可以使用绝对定位将页脚固定到父 div 的底部。我还在包装中添加了 10px padding-bottom（匹配页脚的高度）。绝对定位是相对于父 div 而不是流之外的，因为你已经给了它 position relative 属性。
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;
}
回答by Vagner
On top of your lastest jsfiddle, you just missed one thing:
在您最新的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*/
}
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
但是，这将如何解决您的问题？简单，让我们先解释一下为什么比预期的要大。
Fixed element #sidebarwill use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inheritand #sidebar_wraphas 40% as value in width, then will calculate window.width * 40%, then when if your window width is bigger than your .containerwidth, #sidebarwill be bigger than #sidebar_wrap.
固定元素#sidebar将使用窗口宽度大小作为基础来获得自己的大小，就像其他所有固定元素一样，一旦在此元素中定义width:inherit并#sidebar_wrap具有 40% 作为宽度值，则将计算window.width * 40%，然后当您的窗口宽度大于您的.container宽度，#sidebar将大于#sidebar_wrap.
This is way, you must set a max-width in your #sidebar_wrap, to prevent to be bigger than #sidebar_wrap.
这样，您必须在您的 中设置最大宽度#sidebar_wrap，以防止大于#sidebar_wrap.
Check this jsfiddlethat shows a working code and explain better how this works.
检查这个显示工作代码的jsfiddle并更好地解释它是如何工作的。
回答by Mohammad Masoudian
Remove Padding: 10%;or use pxinstead of percentfor .wrap
删除Padding: 10%;或使用像素而不是百分比为.wrap
see the example : http://jsfiddle.net/C93mk/493/
看例子：http: //jsfiddle.net/C93mk/493/
HTML :
HTML :
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS:
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;
}
