Question

我有一个容器和子元素。容器定位固定，高度为10％。每个子元素必须具有100％的高度和宽度等于其高度 - 当我添加我的容器水平扩展而不是垂直扩展时，这变得更加复杂。我想问一下是否可以使用CSS，因为使用JavaScript可以很容易地实现，但我必须听取窗口调整大小这是一个痛苦，我想避免这种情况。

.container {
  width: 200px;
  height: 10%;
  border: solid 1px black;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: auto;
}

.container > div {
  display: inline-block;
  height: 100%;
  width: 50px;
  border-radius: 50%;
  border: solid 1px black;
}

https://jsfiddle.net/fdtajx3k/1/

Answer 1

以下可能适合您。

在您的孩子div元素上，使用视口单元vh作为宽度和身高值。

另外，如果滚动条有问题，请在父容器上添加一些底部填充（可选）。

参考：https://www.w3.org/TR/css3-values/#viewport-relative-lengths

＆＃13;

html,
body {
  height: 100%;
}

.container {
  width: 200px;
  height: 10%;
  border: solid 1px black;
  position: fixed;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: auto;
  padding-bottom: 30px;
}

.container > div {
  display: inline-block;
  height: 10vh;
  width: 10vh;
  border-radius: 50%;
  border: solid 1px black;
  box-sizing: border-box;
}

＆＃13;

<div class=container>

  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>
  <div>

  </div>

</div>

＆＃13;

宽度等于高度

1 个答案: