如何在父标签有填充时使div的宽度为100％？

我有一个HTML页面，其中body标签具有CSS填充左侧和填充右侧的应用。我想页面页脚div是100％的页面宽度，但没有应用body padding。有没有这样做的好方法？如何在父标签有填充时使div的宽度为100％？

2011-03-30 mikel

你的意思是躯宽= body.width + 10px的+ 10px的？ – 2011-03-30 06:49:16

是的，我可以用JavaScript做到这一点，但我想这可能是我也缺少的一种CSS方式。 – mikel 2011-03-30 06:52:28

您可以应用阴性切缘向内侧容器否定填充

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

来源

2011-03-30 06:42:08

不起作用，如果元素需要响应（％ - 宽度） – ProblemsOfSumit 2013-05-16 20:14:30

对于后代....这是实现正常的方式是'position：absolute;正确：0;左：0;' – Ryan 2018-01-18 01:05:01

如果你给页脚左右页边距大小相等的负量，对身体的填充，那么它会抵消身体的填充。

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

来源

2011-03-30 06:42:49

不知道这是你的情况而言，但我有一个表格（试图为响应码），宽度：100％，需要填充在inputfields因此该解决方案是

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

继承字段只是做了伎俩。（仅适用于Chrome测试）

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

来源

2012-11-13 08:08:00 Deko

玩耍了一段，“宽度：继承;”解决了这个问题对我来说：

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

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

来源

2015-06-17 14:13:50

完美工作 – Alex 2016-10-05 10:15:47

很高兴听到它！ – 2016-12-19 23:16:31

另一种替代方式，可以是这样的：使用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); 
}

来源

2015-10-15 06:08:18

有解决这个父元素使用calc的另一种方式。这样，填充和calc都在相同的CSS类中，并且如果填充已被修改，则会更容易看到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>

来源

2018-01-05 19:26:38

....或者在'子类'上有'position：absolute;正确：0;左：0;' – Ryan 2018-01-18 01:06:54

如何在父标签有填充时使div的宽度为100％？

回答

相关问题