How can I remove the white space at the bottom of my web pages?

Question

I'm trying to create a site using Wordpress. I created a theme and most of my pages are created using page templates because I wanted to stay away from the blog look.

Everything looked great until I viewed the site on my ipad in portrait mode. I have a huge white space at the bottom of every page. I used Chrome Canary's developer's tool but could not find the element that's causing the whit space.

I've been searching forums for days and tried solutions that have helped others with the problem. No luck so far.

I tried using media queries like:

 @media only screen and (min-width: 768px) and (max-device-width: 1024px) and      (orientation:portrait)   and (-webkit-min-device-pixel-ratio: 1) {

 Html,body{
     Overflow:hidden;
 }

Still have the huge white space at the bottom of every page when I'm in portrait mode on my ipad.

Please help me find the fix for this problem. Here's a link to my site: http://www.davidsdrift.com/

Thanks for any help.

Answer 1

If your site design has a static height, then any browser that is taller than that height (most mobile browsers, since they're in portrait orientation) will just stop at that point, and not put anything else below. The browser just defaults to "nothing" (ie white space) after that.

You could set a simple background color, so that it's not just defaulting to white below your designed area ( body {background-color: #CCCCCC;} ), or try something fancier than that.

Or, (gulp) you could totally re-jigger the site to not use a static rectangular design.

Answer 2

It depends if you want to put image to fill 100% your height just add

background-size: 100% 100%;

Else if you want to fill content use percentage not pixels for full height

Answer 3

Remove the two background-size properties from body and add background-size: cover; .

Add this selector

html {
    min-height: 100%;
}

Your background should now cover the entire screen regardless of resolution. You may also wish to add background-position: center center; too.

Example

html {
    min-height: 100%
}
body {
    background: url(images/homePage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

Answer 4

To add to Joe's answer: The reason why you are seeing white space on the ipad in portrait mode is because of the aspect ratio and orientation of your background image.

There are countless fixes for this, however they all depend on what you would like to do with that extra white space. You could enlarge your background to cover the whole space, repeat the background, use CSS3 properties to create a mirror effect, etc.

Assuming you just want the background to take up the whole space when in portrait mode use this:

@media (orientation:portrait){
  html{ min-height:100% }
  body {
    background:url(images/homePage.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
  }
}