Fullscreen responsive div

[hrushi9]

Fulllscreen div misbehave on window resize.
Demo

fullpage is main container having fullscreen height & width.
section is inner div of full height & width.
When window is resized after scrolling to any div it leaves some space from top.

How to make it responsive & scrolling fullscreen page?

(section should stick to top & left : margin, padding to left = 0)

Menu

<ul id="menu">
  <li><a href="#section-0"> home </a></li>
  <li><a href="#section-1"> about </a></li>
  <li><a href="#section-2"> services </a></li>
  <li><a href="#section-3"> gallery </a></li>
  <li><a href="#section-4"> contact </a></li>
</ul>

Fullscreen Div container, .fullpage, Contains Fullscreen Div .section

<div class="fullpage">
  <div class="section" id="section-0">
    <h1>Home</h1>
  </div>
  <div class="section" id="section-1">
    <h1>About</h1>
  </div>
  <div class="section" id="section-2">
    <h1>Services</h1>
  </div>
  <div class="section" id="section-3">
    <h1>Gallery</h1>
  </div>
  <div class="section" id="section-4">
    <h1>Contact</h1>
  </div>
</div>

Script to scroll section

    jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";//html, body
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};





        $("#menu li a").click(function(e) {

            // e.preventDefault();
            var target = $(this).attr('href');

            $.scrollTo(target);        

            return false;
        });

CSS

#menu {
    position: fixed;
    z-index: 1000;
    background: #F03438;
    float: left;
}
.fullpage {
    position: absolute;
    width: 100%;
    height: 100%;
}
.section {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    border: 2px solid #FFFFFF;
    margin: 0 !important;
}

[hrushi9]

Got Little solution
Now problem with modified click function.

target stores garbage values

$("#menu div a").click(function(e) {            

            var target = $(this).attr('href');
            $.scrollTo(target);     

            var windowHeight = $(window).height(),
            gridTop = windowHeight * .3,
            gridBottom = windowHeight * .6; 


             $(window).on('resize', function () {

            $(target).each(function () {

                var thisTop = $(target).offset().top - $(window).scrollTop();

                if (thisTop > gridTop ) {
                   // $(this).css('background', 'red');
                    //$.scrollTo(target); 
                } else {
                   // $(this).css('background', 'gray');
                    $.scrollTo(target); 
                }
            });
        });



            return false;
        });

[double_virginia]

From what I've got from your description, you need to use media queries to make your page responsive.
Also, try not to use !important in your CSS, and multiple H1 in your HTML

[ewai1]

Also, You need to make sure you have the viewport metatag

Reference: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag