100% width/height absolute parent with padding - html

Question

My goal is to have a container that fills up it's parent with some padding like you see in the blow snippet. Right now the only way I could figure out how to accomplish this is with calc(). And since calc technically has a better browser support then flex, I'd like to stay away from that.
Can anyone see a way to accomplish this without javascript and with calc()?
Assume that all width's are percentages.
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
width:calc(100% - 20px);
height:calc(100% - 20px);
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>

Answer 1

Simply use top/left like you did and right/bottom
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:10px;
bottom:10px;
left:10px;
top:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>
You can also consider margin too:
* { box-sizing: border-box;}
.box {
position:relative;
margin:5px;
}
.halfBox {
padding-bottom:100%;
border:1px solid red;
}
.fullBox {
padding-bottom:50%;
border:1px solid red;
}
.content {
font-size:12px;
background-color:#e3e3e3;
position:absolute;
right:0;
bottom:0;
left:0;
top:0;
margin:10px;
}
<div style="font-size:0">
<div style="width:200px;display:inline-block;">
<div class="halfBox box">
<div class="content">
1
</div>
</div>
</div>
<div style="width:400px;display:inline-block;">
<div class="fullBox box">
<div class="content">
1
</div>
</div>
</div>
</div>