Question

我的目标是要有一个容器，用一些填充物填充它的父容器，就像在打击片段中看到的那样。现在，我能弄清楚如何完成此操作的唯一方法是使用scala> 5 / 0 java.lang.ArithmeticException: / by zero ... 28 elided。而且从技术上来说，calc()比calc拥有更好的浏览器支持，所以我想避免这种情况。

谁能看到一种无需使用javascript和calc（）来完成此任务的方法吗？

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

flex

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

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>

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

1 个答案: