父标记填充时如何使div 100%宽度？

Question

我有一个HTML页面,其中body标签应用了CSS padding-left和padding-right.我希望页面页脚div可以是页面的100%宽度,但不应用正文填充.有这么好/简单的方法吗？

Answer 1

您可以对内部容器应用负边距以取消填充

<body style="padding:0 40px">
<div style="width:100%;margin:0 -40px">&nbsp</div>
</body>

Answer 2

如果你给页脚一个左右边距,这是一个负数,与身体的填充大小相等,那么它将抵消身体的填充.

body {
    padding-left:10px;
    padding-right:10px;
}
.footer {
    margin-left:-10px;
    margin-right:-10px;
}

Answer 3

另一种替代方法可以是：使用 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);
}