响应式CSS绝对定位顶部位置

Question

我需要你的帮助！ 一直在寻找解决方案，但没有找到，所以想问问你。

为了一个学校项目，我需要将随机数量的大厅放置在地图上正确的位置。 例如，我只使用了4个大厅，并在从Angular检索到的JSON中硬编码了所有信息，如你在这个CodePen中看到的。

<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>

我已经解决了网页缩放时大厅大小的问题。

唯一的问题是使用top属性的绝对定位没有像预期的那样工作。

所有计算都考虑了宽度为1000px和高度为500px，但如果浏览器也缩放，则应全部调整大小。

另外，让父元素适应正确的高度也是我所困扰的问题。

有人可以帮忙吗？

- MichaelDeBoey

---

你可以使用百分比代替像素吗？ - yts

@MichaelDeBoey 确实。我不确定为什么我认为它是px。 - yts

@MichaelDeBoey，不要使用 top: x%，尝试使用 top: 0 并使用 margin-top: x%。您可能需要调整 x 的值。 - yts

我不太确定你想要实现什么或者存在什么问题。你可以使用“视口单位”来解决父元素高度的问题，max-height: 100vh; height: 500px;可能是一个好的起点。你可能需要将100vh更改为其他值，不要忘记你也可以使用calc()。 - ezattilabatyi

你能把你的回答设置为解决方案吗，@yts？ - MichaelDeBoey

Answer 1

问题在于使用 top 属性时，百分比是基于容器的 高度 计算的，而不是宽度。 为了解决这个问题，将 top 设置为 0，然后使用 margin-top: x%;。所有边距都是基于容器的宽度计算的，因此当窗口大小调整时，margin-top 也会相应缩小。

- yts

---

不需要再设置“top”了，顺便说一句;-) - MichaelDeBoey

你节省了我的时间，谢谢 @yts - funbrain9