[Iphone]On Landscape mode, height not getting adjusted on page refresh or when header is active

My mobile web page design is liquid so that it gets rendered perfectly on any device size. On iPhone 5C with iOS 7 and iOS 8 in Landscape mode by default (with out address bar) design looks good but once Safari's address bar and bottom navigation-bar is active then design is not getting adjusted based upon the updated height.

Here are the detailed scenarios:

1. With reference to Image1 and Image2:

On viewing the design in landscape mode when we tap on the header area the top address bar and bottom navigation-bar of Safari are shown as an overlay (Image1). Once you click on header area then design will move to the bottom and starts after the header address bar (Image2).

This results in the 2 icons (hamburger and refresh) to be not in the vertical center of the screen. They should stay in the center of the screen irrespective of the visiblity of the address and navigation bars. Since the design is liquid, if we get the correct height of the body with and without the address & navigation bars, then the icons will be automatically vertically centered. As of now due to the height exceeding the visible view-port, the design is cut off from bottom (Image 3)

2. With reference to Image3: Refresh your design in landscape mode, design is exceeding the visible view-port hence design is getting cut off.

Desired Output: Design should get adjusted if top address bar and bottom navigation bar is on, it means it should adjust based upon the visible height.

Visible Height = Total Height - Height of Address bar - Height of Navigation Bar