How to avoid scrolling when resizing the page? - html

Question

I have two divs that stack horizontally on each other.
Each div occupies 100% of the view-port.
.section{
width:100%;
height:100%;
}
In each div there is an anchor to the other div.
<div class="first section ">
<a name="first-section"> </a>
<p>Click here to go to the second section</p>
</div>
<div class="second section">
<p>Click here to go to the first section</p>
</div>
<a name="second-section"> </a>
My goal is to show the content of only one div each time. But when one is on the second section div and resize the page, the two divs are showned when the page is resized to its initial size.
How can I avoid scrolling up when the page is resize?
I have body{overflow:hidden;}. Thanks.

Answer 1

You can set the div to position:fixed, so it's always relative to the viewport. Then hide all the divs except the first one by default, and show the one when it's on :target.
jsFiddle example
html, body { height: 100%; }
body { margin: 0; }
.section {
width: 100%;
height: 100%;
position: fixed;
}
.section:target {
visibility: visible;
}
.first {
background: lightblue;
}
.second {
background: lightgreen;
visibility: hidden;
}
<div class="first section" id="first-section">
<p>Click here to go to the second section</p>
</div>
<div class="second section" id="second-section">
<p>Click here to go to the first section</p>
</div>
Or, use z-index with different values, and move the div on top when it's on :target.
jsFiddle example
html, body { height: 100%; }
body { margin: 0; }
.section {
width: 100%;
height: 100%;
position: fixed;
}
.section:target {
z-index: 3;
}
.first {
background: lightblue;
z-index: 2;
}
.second {
background: lightgreen;
z-index: 1;
}
<div class="first section" id="first-section">
<p>Click here to go to the second section</p>
</div>
<div class="second section" id="second-section">
<p>Click here to go to the first section</p>
</div>
Note, both approaches require each div to have a solid background defined.