CSS - 尽管设备的屏幕尺寸很大，但仍将元素放在同一个地方

Question

我正在开发一个Ionic App，它需要在设备屏幕的左下角放置一些按钮（一个在另一个上面，而不是内联）

我有以下CSS：

.button {
   left = "1em";
   z-index = "13";
   overflow = "scroll";
   position = "absolute";
   width = "3em";
   height = "2.5em";
   textAlign = "center";
}

然后我像这样计算它的底部：

let bottom: number = 0;

this.floors.forEach(floor => {
   let floorButton: HTMLElement = document.createElement("button");

   floorButton.setAttribute("class", "button");
   floorButton.appendChild(document.createTextNode(floor.level));
   floorButton.style.bottom = bottom + "em";
   bottom = bottom + 5;
});

现在我的问题很简单：在屏幕比其他设备大的设备中，它位于上方位置。

我可以通过计算设备屏幕的高度并将其除以x次直到达到我想要的位置来解决这个问题。但这看起来很脏（我不知道这是不是正确的等待，也许是）。

所以我的问题是，是否有一种更简单的方法，就像我上面的那样，而不是必须以像素计算屏幕的高度大小？它可以直接由CSS完成吗？我已经检查了@media，但看起来它根本没用。或者也许我只是做得对，而且我过度思考它？

谢谢！

Answer 1

您可以使用CSS：

.button {
   display: block;
   margin-top: 5px;
}

这样无论屏幕的宽度是多少，总是你的按钮会分开。