I have a single-page website consisting of three sections, each spanning the entire width and height of the window. While resizing the window on the first or last section, everything adjusts smoothly. However, when I am on the second section, things get a bit wonky. Upon resizing the window, the first section shrinks, causing the second section to move up and reveal part of the third section.
My goal is for the second section to stay fixed within the window when resizing, so any fragments of the first and third sections are not visible. It's a bit tricky to explain in words, so here is a simple fiddle showcasing the issue: http://jsfiddle.net/4tVMk/. I'm specifically referring to the behavior of section B (div#two). To add some context, scrolling on the site is disabled, and I aimed for it to resemble a slideshow, hence why every resize messes up the visual presentation.
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've attempted adjusting the size of the last div as a workaround but that caused the third div to disappear completely. Another failed attempt was reloading the entire page upon each resize that changed the height, but that proved ineffective as well since I couldn't achieve a full reload without losing my current location.
Any help is appreciated.
E: Taking the term 'fixed' literally, I used jQuery to prevent the area from moving under certain conditions. While this solution works for now, I would greatly appreciate any hints on how to automate this process or where to seek further guidance.