homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Stacking divs in iphone optimized layout
ocon

5+ Year Member



 
Msg#: 4358812 posted 3:16 pm on Sep 5, 2011 (gmt 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">
<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>

 

JAB Creations

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



 
Msg#: 4358812 posted 4:16 am on Sep 6, 2011 (gmt 0)

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">
//<![CDATA[
window.onload = function()
{
window.scrollTo(0,1);
}
//]]>
</script>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved