Html 当父标签有填充时如何使 div 100% 宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5482712/
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
How to make div 100% width when parent tag has padding?
提问by mikel
I have an HTML page where the body tag has CSS padding-left and padding-right applied. I'd like the page footer div to be 100% width of the page though, without the body padding applied. Is there a good/easy way of doing this ?
我有一个 HTML 页面，其中 body 标签应用了 CSS padding-left 和 padding-right。我希望页面页脚 div 为页面的 100% 宽度，但不应用正文填充。有没有好的/简单的方法来做到这一点？
采纳答案by David John Smith
You could apply a negative margin to the inside container to negate the padding
您可以对内部容器应用负边距以取消填充
<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>
回答by Leon Bambrick
If you give the footer a left and right margin that is a negative amount, of equal size to the padding of the body, then it will counter the body's padding.
如果你给页脚一个负值的左右边距，与正文的填充大小相等，那么它将抵消正文的填充。
body {
padding-left:10px;
padding-right:10px;
}
.footer {
margin-left:-10px;
margin-right:-10px;
}
回答by Suman K.C
Another alternative way can be this : using calc
另一种替代方法可以是这样的：使用 calc
<div class="parent"> <!--/ Parent div with padding left right -->
<div class="child">i'm Child div</div>
</body>
CSS
CSS
.parent{
padding:0 20px;
}
.child{
width:-moz-calc(100% - 40px); <!--/ similar with other browser prefixes -->
width:calc(100% - 40px);
}
回答by Tom Durkin
After some playing around, 'width: inherit;' solved it for me:
经过一番尝试，“宽度：继承；” 为我解决了：
#parent-container {
width: 400px;
padding: 0 15px;
}
#inner-div {
width: inherit;
margin: 0 -15px;
}
回答by Jean-Fran?ois Beauchamp
There is another way of solving this using calcon the parent element. That way, both the padding and the calcare in the same CSS class, and if the padding has too be modified you will see more easily that the calcformula has to be modified too than if it lies in the child element CSS class.
还有另一种使用calc父元素来解决这个问题的方法。这样，padding 和 thecalc都在同一个 CSS 类中，如果 padding 也被修改了，你会更容易看到calc公式也必须修改，而不是它位于子元素 CSS 类中。
html,
body {
width: 100%;
height: 100%;
padding: 9;
margin: 0;
}
.parent {
width: calc(100% - 40px); /* 40px: 2 * 20px padding */
height: calc(100% - 50px); /* 50px: 2 * 25px padding */
padding: 25px 20px;
box-sizing: content-box;
background-color: tomato;
}
.child {
width: 100%;
height: 100%;
background-color: #fbf7e5;
}<div class="parent">
<div class="child"></div>
</div>回答by GullerYA
When a flexboxlayout used and a generic solution needed (say you do notwant to be aware of the parent's padding sizes) the following shall be used (pay attention to the box-sizingproperty on parent:
当flexbox使用布局和通用的解决方案需要（说你不是想知道父母的填充大小）以下，应使用（讲究box-sizing的parent属性：
.parent {
display: flex;
flex-direction: column;
padding: 48px;
box-sizing: border-box;
}
.child {
width: 100%;
}
回答by Deko
Not sure if that is for your case specifically, but i had a form (trying to code for responsive), width:100% and needed padding in inputfields so the solution was
不确定这是否特别适合您的情况，但我有一个表单（尝试编写响应式代码），宽度：100% 并且需要在输入字段中填充，所以解决方案是
form {
margin: 0px 3%;
width: 94%;
}
input:valid, textarea:valid {
width: inherit;
padding: 15px;
}
Inherit on fields just did the trick. (Only tested in chrome)
在字段上继承就行了。（仅在 chrome 中测试）
Update: noticed that this breaks graphical layout with some pixels, also here is a good illustration: http://theturninggate.net/2012/01/better-responsive-forms/
更新：注意到这打破了一些像素的图形布局，这里也是一个很好的例子：http: //theturninggate.net/2012/01/better-responsive-forms/
