100% Высота Div с jQuery и CSS

Question

Я пытаюсь создать набор полнофункциональных DIV без успеха на мобильных платформах. На устройствах iOS и Android первый DIV будет отображаться отлично, но второй будет иметь верхний край, даже если мои поля установлены на «0».

Красный с первого DIV по-прежнему виден после прокрутки к основанию.

screenshot http://i62.tinypic.com/2dqsuo7.jpg

Вот JavaScript я использовал, чтобы повторить эту проблему ...

$(document).ready(function() { 

    $(window).resize(function() { 

     var newHeight = $(window).height(); 

     $('div').css({ 
      width: '100%', 
      height: newHeight + 'px' 
     }); 

    }); 

}); 

CSS-...

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

     div { 
      width: 100%; 
      height: 100%; 
     } 

     .red { 
      background: red; 
     } 

     .blue { 
      background: blue; 
     } 

и HTML ...

<div class="red"> 
</div> 

<div class="blue"> 
</div> 

Answer 1

Почему бы просто не использовать CSS?

.red, .blue{ 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Answer 2

Я исправил проблему, обернув DIV внутри контейнера DIV и установив переполнение-x в скрытое.

Новый css.

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

div#container { 
    overflow-x: hidden; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

.red { 
    width: 100%; 
    height: 100%; 
    background: red; 
} 

.blue { 
    width: 100%; 
    height: 100%; 
    background: blue; 
} 

Javascript ...

$(document).ready(function() { 
    $(window).resize(function() { 
     var winHeight = $(window).height(); winWidth = $(window).width(); 
     $('fp').css(function(){height : winHeight + " !important", width : winWidth + '!important'}); 
    }); 
}); 

Теперь отлично работает в мобильных и настольных браузеров.