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

[sandras]

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

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

[VeVas]

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:

 <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

[somdow]

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:

 <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

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.

<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>