Vertical layout not working in iOS Simulator

ionic-v1
1

Hi everyone:
I’m working on an app which needs to be responsive vertically on all devices.
The layout works perfect in Chrome emulator, it’s also perfect on Android device.
However, it’s different in iOS Simulator. See the screenshot:

What I want to achieve is:

  1. the bar header takes certain height, like 44px(I hide the statusbar).
  2. the other 4 blocks divide the remaining vertical space equally.

my css is like this: codepen.
it works perfect, except on iOS Simulator(I’ve not test on iOS device yet).

the problem lies in here:
.scroll
height: 100%

normally, it will equal to .scroll-content height which is the whole screen height(568px) - header(44px). so then, I can divide the vertical space in it by “height: 25%”.

However, on iOS Simulator, the height of .scroll becomes different, looks like the whole screen.

Does anyone know why this happens?

1 Like