Gap below content on iPad

Gap below content on iPad

I've got a webpage set up where I have some links in the middle, and under
that a div floated right on the side, about 25% of the screen and another
div with position: fixed, left: 0, bottom: 0. On my desktop, in Firefox,
the image inside the fixed position div sits right in the bottom left
corner. However, on the iPad there is a large gap under the floated right
div. the image will either start below the view on the screen or even way
farther down the page with a massive gap in content between the top of the
image and the bottom of the last block of text.
<div class="wrapper">
<div id="containerLeft">
<img id="ipad" src="images/ipad-small.png" alt="a picture of an
ipad held in a hand" />
</div>
<div id="containerRight">
<article>
<p> stuff </p>
<p> more stuff </p>
</article>
</div>
</div>
.wrapper{
width: 100%;
overflow: hidden;
}
/* ------------ Left Container Content - image ------------- */
#containerLeft{
width: 50%;
z-index:-9999;
overflow: hidden;
float: left;
}
#containerLeft img{
position: fixed;
left: 0;
bottom: 0;
display: block;
}
/* ---------- Right Container Content - copy on the side ---------------- */
#containerRight{
width: 25%;
float: right;
margin: 50px 3.854167% 0 0;
}
#containerRight article{
width: 100%;
}
#containerRight article p{
line-height: 140%;
font-weight: 400;
font-size: 0.45em;
text-align: right;
font-style: italic;
overflow: visible;
padding: 1%;
margin: 2% 0 0;
}
Can anyone tell from this what is causing the large gap at the bottom of
the screen?
Thank you