Stacking divs in iphone optimized layout

I am having the most challenging time with my iPhone layout and what seems the most frustrating is what I need seems relatively simple.

I'm trying to get two divs one immediately following the other, with both divs 100% wide, the bottom div 70px high, the top div taking up the rest of the screen, and this is true regardless of orientation. I'm also trying to use javascript to scroll down 1px so the top toolbar is hidden and I'm trying to get a 1:1 scale regardless or orientation. Lastly I do not want the user not to be able to scale the site.

My biggest problem is positioning the divs, and then filling up the screen so the browser can still scroll down 1px.

This is what I have so far, any help tweaking the code is much appreciated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<style type="text/css">
html,body{margin:0;padding:0;overflow:hidden;width:100%;height:100%}
div{margin:0;padding:0;width:100%;background:#abcdef}
#top{height:100%;margin-bottom:-70px;background:#fedcba}
#bottom{height:70px}
</style>
<script type="text/javascript">
<!--
window.scrollTo(0, 1);
// -->
</script>
</head>

<body>
<div id="top">Fills up the screen</div>
<div id="bottom">Always 70px high</div>
</body>
</html>

Stacking divs in iphone optimized layout

ocon

JAB Creations

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week