Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 3 of 3

Thread: How to get 100% footer at an ipad or iphone?

  1. #1

    How to get 100% footer at an ipad or iphone?

    Just wonder if you have any clue why my footer is not showing up 100% at an ipad or iphone in Safari (doing great in safari at my computer though)



    http://www.lexsign.se


    Code:
    div.footer {
    text-align: center;
    padding-top: 30px;
    padding-bottom:10px;
    margin-top:30px;
    width: 100%;
    position:relative;
    height:300px;
    bottom:0px;
    left:0px;
    right:0px;
    } 
    
    div.insidefooter {
    width:1080px;
    text-align: left;
    font-family:Verdana;
    padding-top:0px;
    margin:1px auto;
    margin-top:0px;
    margin-bottom:10px;
    }

    Thanks

  2. #2
    58
    posts
    Registered User
    It might be beacuse you have to wide information area inside your footer. The default viewport width in safari on ihpone is 980 px, so since your footer has width 100% that would then be 980 px wide but the insidefooter is 1080 px wide, so you got 100px overflow.
    You can set a min-width of your footer. Or force safari to render on a width of 1080px by adding this to your header:

    HTML Code:
     <meta name="viewport" content="width=1080" />
    check out the Safari web content guide on configuring the viewport to meet your needs

    http://developer.apple.com/library/s...eViewport.html
    ---
    VeVas

  3. #3
    Quote Originally Posted by VeVas View Post
    It might be beacuse you have to wide information area inside your footer. The default viewport width in safari on ihpone is 980 px, so since your footer has width 100% that would then be 980 px wide but the insidefooter is 1080 px wide, so you got 100px overflow.
    You can set a min-width of your footer. Or force safari to render on a width of 1080px by adding this to your header:

    HTML Code:
     <meta name="viewport" content="width=1080" />
    check out the Safari web content guide on configuring the viewport to meet your needs

    http://developer.apple.com/library/s...eViewport.html
    or just dont do any width at all. aslong as the body has no padding or margin set to it via css, then itll stretch across the whole screen with no problem.

    also what can help is, since you said iphone, if you add this line of code
    itll insure that the thing doesnt scroll anywhere but up/down etc.

    oh and add this to the head , /head tags in your html/php whatever.

    <meta name = "viewport" content = "initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width " />

    then this alone should work. if like me, i plan on NOT maintaining to sites at the same time ( TEDIOUS ) and pulling
    the mobile contents from its main...via php, then some of the images or div tags MAY break the above rule since the content will
    "overflow" width wise....so to that, add a

    HTML Code:
    overflow-y:hidden;
    
    or a
    
    overflow-x:hidden;
    etc to it, an there you go...

    oh and i like this one...below, remove the addy bar on load.



    HTML Code:
    <script type="application/x-javascript">
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    
    function hideURLbar(){
    window.scrollTo(0,1);
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012