html - CSS - 无论设备的屏幕尺寸如何，都将元素定位在同一位置

Question

我正在开发一个 Ionic 应用程序，它需要在设备屏幕的左下角放置一些按钮(一个在另一个之上，而不是内联)

我有以下 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;
}

这样不管屏幕的宽度是多少，你的按钮总是在单独的行中。