宽度等于高度

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

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

<div class=container> 
 

 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 

 
</div>