title: Single page website- fit content to 100% of screen
body: <p>trying to achieve that:</p>
  
  <p>Single page website- fit content to 100% of screen</p>
  
  <p>I have an-</p>
  
  <pre><code>html{
   body{
    #header
    #page1
    #page2
    #page3
   }
  }
  </code></pre>
  
  <p>i am trying to fit every page(id) to width: 100%, and height of 100%
  so, if the user will zoom out from the page and he is now on #page1 div, he won't see any other div
  because #page1 div is set to take 100%, width and height, no matter what is the window size.</p>
  
  <p>I tried to accomplish this by setting the:</p>
  
  <pre><code>html,body{width:100%; height:100%}
  </code></pre>
  
  <p>my #page1 has a background-image and with the above css, it worked, if i zoom out it set the page to 100% height and width.</p>
  
  <p>and even</p>
  
  <pre><code>#header, #page1, #page2{min-width:100%; min-height:100%}
  </code></pre>
  
  <p>how can I accomplish that effect?</p>
  
  <ul>
  <li>i only want to give the user <strong>the illusion that it's really a page</strong> and not just a div</li>
  </ul>
  
  <hr>
  
  <p>i'll try to explain my self even better, suppose i am a user navigate to my site and scroll down to page2, i get there and zoom out from the page.. even if I zoom to show only 20% from the page will see only 20% from page2(div) I will not see the other div's(page1, page3), same as for re-size the browser window
  if I re-size it it will keep the same proportions as it was opened 100%.</p>
  
  <p><strong>Each div(page) will scale to 100% height of the window.</strong></p>
  
  <p><strong>What i am trying to achieve is that: zoomed out to 20%, look at the scroll bar, you don't see other div's</strong>
  <img src="https://i.stack.imgur.com/4zNOJ.jpg" alt="What i am trying to achieve is that: zoomed out to 20%, look at the scroll bar .."></p>