Geek Answers Handbook

100% html / body height not working on iPhone

I created a responsive website using Foundation with a footer that is absolutely located at the bottom of the page. In my desktop browsers, this looks as it should, but on my iPhone, the footer overlaps some of the content, and not completely at the bottom of the page.

I have my html, body CSS installed for this:

html, body { height:100%; margin:0; padding:0; }

But when I view the page on my phone using the Safari developer tools, when I hover over the html or body tag, it does not extend all the way to the bottom of the page, which causes my footer to overlap the content.

Does anyone know what could be causing this?

Thanks!

+7
html css zurb-foundation
source share
4 answers

You can use:

 height: 100vh;

which will be 100% of the viewing height.

Browser Compatibility: http://caniuse.com/#search=vh

+12
source share

You can use calc, -moz-calc and -webkit-calc . For example, suppose the footer is 100px height , then:

 html, body, .container{ height: -moz-calc(100% - 100px); height: -webkit-calc(100% - 100px); height: calc(100% + 30px - 100px); margin:0; padding:0; }
+1
source share

try adding

 min-height: 100%; min-width: 100%;

CSS rule

0
source share

You can also create a screen-specific style.

 @media screen { html, body { height: 100vh; } }

Read more about media queries here http://cssmediaqueries.com/what-are-css-media-queries.html

0
source share

More articles:


All Articles