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;
});

Теперь моя проблема проста: в устройстве с экраном большего размера, чем в другом устройстве, оно позиционируется в верхнем положении.

Я могу обойти это, рассчитав высоту экрана устройства и разделив его х раз, пока не доберусь до нужной позиции. Но это выглядит грязно для меня (я не знаю, если это правильное ожидание, может быть, это так).

Итак, мой вопрос: есть ли более простой способ сделать это, как я положил выше, вместо того, чтобы вычислять высоту экрана в пикселях? Можно ли это сделать напрямую с помощью CSS? Я проверил @media, но похоже, что это совсем не поможет. Или, может быть, я просто делаю это правильно и слишком много думаю?

Спасибо!

Answer 1

Вы можете просто использовать CSS для этого:

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

Таким образом, не имеет значения, какая ширина экрана, всегда ваши кнопки будут в отдельной строке.