html - 带填充的 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>

您也可以考虑 margin :

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