overflow issues on real mobile device

user_17645008 0
Viewed 24

Im trying to create a mobile view of my software. everything works fine on google mobile emulator and other mobile emulator plugins. This is how it looks on the emulator: Emulator view

Now, when I access it on a real device. it looks like this. Real mobile device view.
As you can see, unlike on the emulator view, the box at the bottom did not go to the bottom-most part of the page even though I set it to position absolute, bottom 0, also, there are no paddings and margins to the main container.

responsive css
1 Answers

If you do .class_div {position:absolute;bottom:0; left:0;}, it will do so, with relation to its parent. If the parent is not touching the bottom screen, the inside item (with position:absolute) also won't.

If you instead use position:fixed, it takes its anchor as html tag so it would always touch bottom.

.p1 {background: yellow; position:absolute; bottom:0; left:0;}
.div1 {position:relative; background: pink; height:100px; width:100px;}
<div class="div1">
  <p class="p1">Hello</p>
</div>

position:absolute is no guarantee of touching your screen's bottom. It will depend where its parent (parent with position:relative) resides and what are its dimensions, and where does it sit?

user_26859140
Related