How to make div 100% width when parent tag has padding?
Question
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 ?
7 answers
solution1
13 ACCPTED 2011-03-30 06:42:08
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>
solution2
6 2011-03-30 06:42:49
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;
}
solution3
5 2015-10-15 06:08:18
Another alternative way can be this : using 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);
}
solution4
1 2015-06-17 14:13:50
After some playing around, 'width: inherit;' solved it for me:
#parent-container {
width: 400px;
padding: 0 15px;
}
#inner-div {
width: inherit;
margin: 0 -15px;
}
solution5
0 2012-11-13 08:08:00
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
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)
Update: noticed that this breaks graphical layout with some pixels, also here is a good illustration: http://theturninggate.net/2012/01/better-responsive-forms/
solution6
0 2018-01-05 19:26:38
There is another way of solving this using calc on the parent element. That way, both the padding and the calc are in the same CSS class, and if the padding has too be modified you will see more easily that the calc formula has to be modified too than if it lies in the child element CSS class.
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>
solution7
0 2019-08-18 13:17:33
When a flexbox layout used and a generic solution needed (say you do not want to be aware of the parent's padding sizes) the following shall be used (pay attention to the box-sizing property on parent:
.parent {
display: flex;
flex-direction: column;
padding: 48px;
box-sizing: border-box;
}
.child {
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.