100％宽度/高度的绝对父级，带填充

Question

我的目标是要有一个容器，像在打击代码片段中看到的那样，用一些填充填充其父容器。 现在，我能弄清楚如何完成此操作的唯一方法是使用calc() 。 并且由于calc技术上讲比flex具有更好的浏览器支持，所以我想避免这种情况。

没有人可以看到没有javascript和calc（）的方法吗？

假设所有宽度都是百分比。

 * { 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

只需像您一样使用top / left和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> 

您也可以考虑保证金：

 * { 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>