Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Stacking divs in iphone optimized layout

3:16 pm on Sep 5, 2011 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
votes: 0

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">
<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">
<script type="text/javascript">
window.scrollTo(0, 1);
// -->

<div id="top">Fills up the screen</div>
<div id="bottom">Always 70px high</div>
4:16 am on Sept 6, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
votes: 12

Hello ocon,

I don't have an iPhone to test this out, I would recommend commenting out the meta viewport element to see how it changes the behavior. The layout works fine in Firefox 6/Safari 5.1 even when resizing the windows to be considerably smaller.

Also you'll want to use this for scripting though I did not test out if the functionality worked...

- John

<script type="text/javascript">
window.onload = function()