Css 如何将高度px转换为%，以便页面在调整大小时响应？

我正在使用980px的最大宽度构建一个响应网格，以将我的固定PX宽度转换为%，但我不确定如何将PX中设置的高度更新为%。有人能就如何实现这一目标提出建议吗？我尝试将高度设置为

max height:300px；高度：100%

但没有成功

Js小提琴

示例CSS

#ctn{
  max-width: 980px; /* 960 */
  width:100%;
  margin: 0 auto;
  clear: left;
  background: #eee;
  padding: 10px;
}

.col{
  background: #b7b7b7;
  max-height: 300px;
  height: 100%;
  margin: 1.041666667%; /* 10/960 */
  float: left;
}

.four{
  width: 31.25%; /* 300/960 */
}

.eight{
  width: 64.583333333%; /* 620/960 */
}

.twelve{
  width: 97.916666667%; /* 940/960 */
  clear: left;
}

---

我会研究媒体查询，它们在转换时非常有效

---

我希望这会有所帮助。

仅当父元素定义了高度，或者它一直以百分比表示到根元素时，以百分比表示的高度才起作用

看看添加时会发生什么

html, body, #ctn { height:100%; }

到你的CSS

但是，只有在非常特殊的情况下才需要定义高度。通常，您希望块适应其内容。
您可以学习媒体查询，并为每种分辨率提供css。当您不知道内容大小的总和时，很难设置容器的高度。嘿，是的，我知道我可以使用媒体查询，但希望我可以使用%宽度和高度自然缩放。col元素自然缩放，然后当我需要将高度提高一点100%到html时，使用媒体查询，body和#ctn工作得很好，唯一的问题是当我调整浏览器的大小时，我的.col元素的高度似乎没有缩小，而是仍然固定在最大高度：300px？如果缩小屏幕尺寸，这个高度不应该降低吗？弄乱高度不是一个好主意，尤其是在一个似乎是通用网格的地方。但是是的，它会保持在它的最大高度（尝试移除它的最大高度，然后看看会发生什么！）。你为什么要设定高度？也许还有其他选择，比如显示：桌面-*或flex box？我想我刚刚找到了一些可以帮助我的东西，非常感谢你的帮助！它相当聪明，但请记住，它只适用于有限的内容。如果您将过多文本放入一个正方形，它将由于
溢出：隐藏
而被“剪裁”。这是我在最初的回复中想到的一个具体案例，因为它不是通用的解决方案，但适用于特定数量的内容+元素维度组合。是的，我了解复杂性，所以会看到事情的发展，我真的只想在有限的网格中使用这个解决方案，如果我使用它的话。目前我只是好奇这是否可以做到。再次感谢