[英]How to make div 100% width when parent tag has padding?
我有一个HTML页面，其中body标签应用了CSS padding-left和padding-right。 我希望页面页脚div可以是页面的100％宽度，但不应用正文填充。 有这么好/简单的方法吗？
您可以对内部容器应用负边距以取消填充
<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px"> </div>
</body>
如果你给页脚一个左右边距，这是一个负数，与身体的填充大小相等，那么它将抵消身体的填充。
body {
padding-left:10px;
padding-right:10px;
}
.footer {
margin-left:-10px;
margin-right:-10px;
}
另一种替代方法可以是：使用calc
<div class="parent"> <!--/ Parent div with padding left right -->
<div class="child">i'm Child div</div>
</body>
CSS
.parent{
padding:0 20px;
}
.child{
width:-moz-calc(100% - 40px); <!--/ similar with other browser prefixes -->
width:calc(100% - 40px);
}
经过一番游戏，'宽度：继承;' 为我解决了：
#parent-container {
width: 400px;
padding: 0 15px;
}
#inner-div {
width: inherit;
margin: 0 -15px;
}
不确定这是否适合您的情况，但我有一个表单（尝试编写响应代码），宽度：100％并在输入字段中需要填充，所以解决方案是
form {
margin: 0px 3%;
width: 94%;
}
input:valid, textarea:valid {
width: inherit;
padding: 15px;
}
对字段的继承就是诀窍。 （仅在镀铬中测试过）
更新：注意到这会打破一些像素的图形布局，这里也是一个很好的例子： http ： //theturninggate.net/2012/01/better-responsive-forms/
还有另一种方法可以使用父元素上的calc来解决这个问题。 这样，padding和calc都在同一个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>
当flexbox使用布局和通用的解决方案需要（说你不想知道父母的填充大小）以下，应使用（注意box-sizing的parent属性：
.parent {
display: flex;
flex-direction: column;
padding: 48px;
box-sizing: border-box;
}
.child {
width: 100%;
}
当子级有位置时，如何使子级div与父级div的宽度相同：绝对和一些填充
[英]How to make a child div the width of the parent div when the child has position:absolute and some padding
如何强制具有 100% 宽度的绝对位置以适合带有填充的父 div？
[英]How to force position absolute with 100% width to fit into parent div with padding?
我如何调整我的CSS，以便当子标记的宽度为100％时，Firefox尊重填充？
[英]How can I adjust my CSS so that Firefox respects the padding when child tag has width: 100%?
如何使DIV居中并具有几乎100％的宽度和100％的高度
[英]How to make a DIV centered and has almost a 100% width and a 100% height
通过忽略父 div 填充来实现 css 100% 宽度的最佳方法
[英]best way to implement css 100% width by ignoring parent div padding
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.