当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Ipad Safari iOS 8 layout not sitting correctly under new tab bar

问题描述:

Running into a dilemma here using fixed 100% width and height on Safari iPad iOS8

What happens is, when landing on the site on iPad Safari for the first time the layout is fine and works as expected. But then I open a new tab on and the tab menu drops down, it comes over the top of my templates.

(The window.innerHeight remains at 960px).

Now if I refresh the templates again start responding correctly and fit nicely under the tab bar.

(window.innerHeight is now at 928px).

When the 'new tab' is closed after the refresh they window.innerHeight goes back to 960px and adjusts the layout accordingly.

When I replicate this behavior in landscape and when a tab is opened the window.innerHeight automatically adjusts as expected and situates the templates nicely under the tab bar, unlike when doing the same action in portrait.

html {

width:100%;

height:100%;

}

body {

height: 100%;

width: 100%;

overflow: auto;

}

#viewport-container {

overflow: hidden;

position: absolute;

height: 100%;

width: 100%;

}

.header {

width: 100%;

top: -100px;

height:100px;

position: fixed;

}

.full-container {

width:100%;

height:100%;

position:fixed;

}

<html>

<body>

<div id="viewport-container">

<div class="header"></div>

<div class="template">

<div class="full-container"></div>

</div>

<div class="template">

<div class="full-container"></div>

</div>

<div class="template">

<div class="full-container"></div>

</div>

</div>

</body>

</html>

Here's an image displaying the issue I'm having

分享给朋友:
您可能感兴趣的文章:
随机阅读: