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);
}

Answer 4

经过一些游戏，＆＃39; width：inherit;＆＃39;为我解决了这个问题：

#parent-container {
  width: 400px; 
  padding: 0 15px;
}

#inner-div {
  width: inherit;
  margin: 0 -15px;
}

Answer 5

不确定这是否适用于您的情况，但我有一个表单（尝试编写响应代码），宽度：100％并且在输入字段中需要填充以便解决方案

form {
   margin: 0px 3%;
   width: 94%;
}
input:valid, textarea:valid {
   width: inherit;
   padding: 15px;
}

继承字段只是做了伎俩。（仅在镀铬中测试）

更新：注意到这会打破一些像素的图形布局，这也是一个很好的例证：http://theturninggate.net/2012/01/better-responsive-forms/

Answer 6

还有另一种方法可以在父元素上使用calc来解决这个问题。这样，填充和calc都在同一个CSS类中，并且如果填充也被修改，您将更容易看到calc公式必须被修改而不是它的谎言在子元素CSS类中。

＆＃13;

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;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

Answer 7

当使用flexbox布局并且需要通用解决方案时（例如，您不希望了解父级的填充大小），应使用以下内容（请注意{父项上的{1}}属性：

box-sizing

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

7 个答案: