100% height div scrolls up after resizing

Question

I have a one-page website made of three sections. Each of them has 100% width and height. When I resize the window while it's being located on first or last section, everything adjusts just fine, however when I'm on second section, it just goes crazy (not really crazy... After resizing window, first section gets shorter as well, so second section is being dragged up, revealing part of third section).

Thing is, when I'm located on second section and I resize the window, I want this entire section to be 'fixed' inside the window, so I will not see fragments of section one and three. This gets more complicated when I try to describe it, so here's simple fiddle: http://jsfiddle.net/4tVMk/ . I'm talking about the behaviour of section B (div#two). To prove that it makes any sense I can only add that scrolling on the website is turned off and I simply wanted it to look a bit like... slideshow? so every single resize just ruins everything visually.

HTML:

<div id="one"><a href="#two">A</a></div>
<div id="two"><a href="#three">B</a></div>
<div id="three"><a href="#one">C</a></div>

CSS:

#one {
    width:100%;
    height:100%;
    background-color:red;
}
#two {
    width:100%;
    height:100%;
    background-color:green;
}
#three {
    width:100%;
    height:100%;
    background-color:blue;
    font-weight:800;
}
a {
    color:white;
}

I already tried the hax with changing last div size, but then I can't see the third div at all. After giving up on this idea I also tried to simply reload entire page on each resize that changes height, but it doesn't work as well, since I cannot achieve a full page reload without just using current location.

Thanks for any help.

E: Actually I took the 'fixed' thing literally and used jQuery to prevent the area from going up or down under some conditions. It will do for now, but if anyone had at least any idea where I might seek for some hints to make it more automated, I'll be very grateful.

Answer 1

I wanted to accomplish a similar thing in a project I've been involved in recently. In the project's case we wanted a few tab buttons across the top of the screen, which would switch the current page body when clicked.

Your situation seems slightly different, but given that you are disabling scrolling and wanting the current div to occupy 100% width & height of the screen, it sounds like you only want 1 div to be displayed at a time so the code that I used should work for you. I've modified your code to show this:

HTML:

<div class="fill-screen" id="one"><a href="#two">A</a></div>
<div class="fill-screen" id="two"><a href="#three">B</a></div>
<div class="fill-screen" id="three"><a href="#one">C</a></div>

CSS:

div.fill-screen {
    width: 100%;
    height: 100%;
    display: none;
}

div.fill-screen:target {
    display: block !important;
}

#one {
    background-color: red;
}

#two {
    background-color: green;
}

#three {
    background-color: blue;
    font-weight: 800;    
}

a {
    color: white; 
}

JS:

$(window).on('hashchange', function() {
    if (document.location.hash === "" || document.location.hash === "#") {
        document.location.hash = "#one";
    }
});

$(window).trigger('hashchange');

Unfortunately it does require JS but it's very lightweight, and certainly better than using jQuery to prevent the area going up or down. The above example uses jQuery but it would be trivial to accomplish in pure JS - I just happened to be using jQuery in the project.

So to fully explain, this solution uses the CSS :target selector on the three divs. Basically this means that when the div is 'targetted', ie the current hash in the URL references its id, the given CSS will be added to that particular div. Your three divs are set to display: none; by default, so are invisible, but when any of them are targetted in the URL hash the display attribute is overwritten, ie display: block !important; . This causes the targetted div to appear and fill the page, but the other two remain hidden as their CSS is not affected.

The JS is required to set the URL hash in the case where none is given, eg when your user navigates to your page for the first time, and none of the three divs are being targetted. It binds to the hashchange event and then forcibly triggers that event when the page loads. This means that whenever the user navigates to the page without a hash, or tries to remove the hash after the page has loaded, they will be directed back to the default hash - in this case "#one". So navigating to "/page.html" or "/page.html#" will instantly change the URL to "/page.html#one" and trigger the display: block !important; rule on the div with id "one".

It may turn out that you don't need the JS if you don't want any divs targetted on page load, or conversely for additional restrictions you could change the if condition to enforce that the hash is either "#one", "#two" or "#three" with an array membership test. I'll leave it up to you.

If the above isn't completely clear, here's a JSFiddle: http://jsfiddle.net/Tedworthy/M33Ct/