CSS - Position elements on the same place despite of device's screen size

问题: I am developing an Ionic App and it needs to have some buttons (one above another, not inline) on the bottom-left place of the device's screen I have the following CSS:...

问题:

I am developing an Ionic App and it needs to have some buttons (one above another, not inline) on the bottom-left place of the device's screen

I have the following CSS:

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

and then I calculate its bottom like this:

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

Now my problem is simple: in a device with a bigger screen than another device, it is positioning in an upper position.

I can workarround this by calculating the height of the device's screen and dividing it x times until I get to the position I want. But this looks dirty to me (I don't know if it's the right wait tho, maybe it is).

So my question is, is there a simpler way that doing this as the one I put above instead of having to calculate the screen's height size in pixels? Can it be done directly by CSS? I've checked @media but it looks like it won't help at all. Or maybe I'm just doing it right and I'm overthinking it too much?

Thanks!


回答1:

You can just use CSS for this:

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

In this way doesn't matter what is the width of screen, always your buttons will be in separate line.

  • 发表于 2019-03-08 17:21
  • 阅读 ( 167 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除