问题描述
我需要制作一个基于屏幕宽度的方形元素。 为了将高度设置为与宽度相同，我尝试使用 JS，但似乎有点错误。 这是一个例子
var square = document.getElementById('square'); square.style.height = square.clientWidth + 'px';
#square { background-color: blue; width: calc(20vw - 16px); padding: 8px; }
<div id="square">Element</div>
上面蓝色的“正方形”不是正方形。
任何人都可以解释为什么？
我尝试了scrollWidth和offsetWidth而不是clientWidth ，结果相似。
我也没有得到style.width给出一个正确的数字。
即使你在 Chrome 上检查蓝色方块，你也会得到一个高度和宽度的数字，它们很接近，但仍然非常不同。
1楼
两个问题。
首先你需要考虑填充，所以添加box-sizing:border-box然后你使用vw单位定义宽度，所以只有当你第一次打开页面时你才会有一个正方形，永远不会调整浏览器的大小。
var square = document.getElementById('square'); square.style.height = square.clientWidth + 'px';
#square { background-color: blue; width: calc(20vw - 16px); padding: 8px; box-sizing:border-box; }
<div id="square">Element</div>
如果你想要一个留在窗口调整大小的正方形，你需要使用相同的指定值而不是像素的计算值（ ）
或更改调整大小的值：
var square = document.getElementById('square'); square.style.height = square.clientWidth + 'px'; window.onresize=function() { square.style.height = square.clientWidth + 'px'; };
#square { background-color: blue; width: calc(20vw - 16px); padding: 8px; box-sizing:border-box; }
<div id="square">Element</div>
作为旁注，您可以考虑 CSS 变量只指定一次相同的值或检查：
#square { --v:calc(20vw - 16px); background-color: blue; width: var(--v); height: var(--v); padding: 8px; box-sizing:border-box; }
<div id="square">Element</div>
2楼
您可以使用相同的 calc 作为高度
width: calc(20vw - 16px);
height: calc(20vw - 16px);