Css 为什么以百分比表示的元素高度不起作用？

我试图创建一个响应性较强的正方形，并添加了以下内容：

.square {
  width: 50%;
  height: 50%;
}

但是，它在水平方向上扩展，但在垂直方向上根本不扩展

JS-Bin
身体{
背景：#cccede；
}
.广场{
宽度：50%；
身高：50%；
边框：2件纯黑
}

高度：50%

意味着它将是其父容器的一半高。你的方块之所以那么小，是因为它在

主体

标签的内部，标签很小。通过执行以下操作，可以使

主体

与屏幕一样高：

body {
    height: 100%;
}

---

正如其他人所说，

%

从元素的容器中工作，因此需要手动设置

主体的高度/宽度

但是，也可以使用/，它们分别表示视口高度和视口宽度的百分比


正文{
背景：#cccede；
}
.广场{
宽度：50vw；
高度：50vh；
边框：2件纯黑
}

Add
html，body{height:100%}
你的正方形高度完全符合他父母的50%，即body，页面构建中的body大小为零（body是html的一部分）