Menu
.item {
box-sizing: border-box;
width: 500px;
height: 60px;
background-color: blue;
border: 20px solid red;
padding: 10px;
position: relative;
}
.child {
width: 100%;
background-color: yellow;
height: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="item">
<div class="child">
</div>
</div>
</body>
</html>EDIT:
From: https://www.w3.org/TR/CSS22/visudet.html#the-width-property:
For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element. This is a change from CSS1, where the percentage width was always calculated with respect to the content box of the parent element.
Why is this this way? I am using border-box and the expectation is that i get 100% of the width of the parent container including the border. Does anyone know a way to include the border too?
The .child element is set to 100% width of the parent (which has width that is the sum of the content + padding + border because of the box-sizing: border-box property) but only takes the content + padding in account. Why it doesn't take the border? I know when I use top/left/bottom/right properties the positioning is relative to the padding edges of the element, but shouldn't the child respect the width of the border when it's set to 100%?
598
This happens because the property width is explicitly defined as relative to content-box (default). Setting the parent's box-sizing as border-box doesn't change this behavior.
I believe the way to overcome this would be using outline property in order to make the border do not consume space.
See a possible alternative below:
<!DOCTYPE html>
<html lang="en">
<style>
.item {
width: 500px;
height: 60px;
background-color: blue;
outline:20px solid red;
border:1px solid black;
padding: 10px;
position: relative;
}
.child {
width: 100%;
background-color: yellow;
height: 100%;
outline:1px solid yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="item">
<div class="child">
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
