Question

是否有相当于vmin的CSS相对于父元素的较小维度而不是视口？

我的左侧有一个带导航面板的页面，因此只有部分视口宽度可供主要内容使用，我正在尝试使用一个不会从主<div>溢出的响应方块。我发现响应方块的代码是this question的答案，但在横向模式下，方块的高度会溢出。

我可以通过聆听窗口大小调整来重新计算方形宽度作为父级宽度和高度之间的最小尺寸，但是在我的实际网站中，父级大部分时间是display: none所以它没有宽度，我希望避免在尺寸出现时重新计算尺寸。

这里是一个JsFiddle，有一个示例和背景来突出显示问题：https://jsfiddle.net/wy874pqv/4/。以下是我使用的代码。

HTML：

<body>
  <div id="main">
    <div class="wrapper">
      <div class="one-by-one aspect-ratio"></div>
      <div class="content">
        <div class="circle">
        </div>
      </div>
    </div>
  </div>
  <div id="leftPanel">
  </div>
</body>

CSS：

body {
  height: 100vh;
  padding: 0;
  margin: 0;
}

div#leftPanel {
  height: 100%;
  width: 20%;
  position: absolute;
  left: 0;
  margin: 0;
  background: red;
}

div#main {
  height: 100%;
  width: 80%;
  position: absolute;
  right: 0;
  margin: 0;
  background: yellow;
}

.wrapper {
  position: relative;
  width: 100%;
  background: rgba(0, 255, 0, 0.3);
}

.one-by-one.aspect-ratio {
  padding-bottom: 100%;
}

.wrapper > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10%;
}

.circle {
  position: relative;
  height: 100%;
  border: dashed 1px;
  border-radius: 50%;
}

CSS vmin等效于父元素

0 个答案: