Single page website- fit content to 100% of screen

css, jquery

Solution

If I got you right, it is possible with plain CSS - isn't it?

Version with native scrollbar

CSS:

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: red;
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
}
#page1 {
  background: blue;
}
#page2 {
  background: yellow;
}
#page3 {
  background: green;
}

JS (for keeping the percentage scroll offset when zooming)

var scrollOffset = [0,0,0]
var $win = $(window);
var $doc = $(document);

$win
.on('scroll', function(){
    // this is needed because scroll is triggered when zooming before the zoom event
    scrollOffset[2] = scrollOffset[1];
    scrollOffset[1] = scrollOffset[0];
    scrollOffset[0] = 100 / $win.height() * $win.scrollTop();
    console.log('scroll event', scrollOffset);
})
.on('resize', function(){
    // set back the history because of multiple zooming events
    scrollOffset[0] = scrollOffset[1];
    scrollOffset[1] = scrollOffset[2];
    scrollOffset[2] = 0;
    console.log('zoom event', scrollOffset);
    window.scrollTo(0, scrollOffset[0] / 100 * $win.height());
})

http://codepen.io/anon/pen/zqteo

Version without native scrollbar but JS "scrolling"

CSS:

html, body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: red;
  overflow:hidden; // remove for "normal" content scrolling
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
}
#page1 {
  background: blue;
}
#page2 {
  background: yellow;
}
#page3 {
  background: green;
}

JS (simple example for page "snapping")

$(function(){
  var top = 0;
  $('.section').on('click', function(){
    top -= 100;
    $('.section').animate({'top': top +'%'});
  });
})

http://codepen.io/anon/pen/ldmBJ

Problem

trying to achieve that: Single page website- fit content to 100% of screen I have an- ``` html{ body{ #header #page1 #page2 #page3 } } ``` 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. I tried to accomplish this by setting the: ``` html,body{width:100%; height:100%} ``` 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. and even ``` #header, #page1, #page2{min-width:100%; min-height:100%} ``` how can I accomplish that effect? - i only want to give the user the illusion that it's really a page and not just a div 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%. Each div(page) will scale to 100% height of the window. What i am trying to achieve is that: zoomed out to 20%, look at the scroll bar, you don't see other div's

Original source