单页网站 - 适合100％的屏幕内容

Question

试图实现这一点：

单页网站 - 适合100％的屏幕内容

我有 -

html{
 body{
  #header
  #page1
  #page2
  #page3
 }
}

我想让每个页面（id）适合宽度：100％，高度100％ 所以，如果用户将从页面缩小并且他现在在＃page1 div上，他将看不到任何其他div 因为＃page1 div设置为100％，宽度和高度，无论窗口大小是多少。

我试图通过设置：

来实现这一目标

html,body{width:100%; height:100%}

我的＃page1有一个背景图片，并且上面的css，它有效，如果我缩小它将页面设置为100％的高度和宽度。

甚至

#header, #page1, #page2{min-width:100%; min-height:100%}

我该如何实现这种效果？

• 我只想给用户一种错觉，即它真的是一个页面而不只是一个div

---

我会尝试更好地解释我的自我，假设我是一个用户导航到我的网站并向下滚动到第2页，我到达那里并从页面缩小..即使我缩放显示只有20％来自该页面只能看到来自page2（div）的20％我将看不到其他div（page1，page3），与重新调整浏览器窗口大小相同 如果我重新调整大小，它将保持与100％打开时相同的比例。

每个div（页面）将缩放到窗口的100％高度。

我想要实现的是：缩小到20％，看看滚动条，你没有看到其他div

Answer 1

如果我找到了你的话，可以使用简单的CSS - 不是吗？

带有原生滚动条的版本

---

<强> 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 （用于在缩放时保持百分比滚动偏移）

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

没有原生滚动条的版本，但JS＆＃34;滚动＆＃34;

---

<强> 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 （页面＆＃34的简单示例;对齐＆＃34;）

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

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

Answer 2

这是包含导航的更新演示。 DEMO

jQuery for div的高度和宽度。

您可以在窗口调整大小时检查高度和宽度的变化。

如果需要，您可以从windowHeight减去标题高度。

var windowHeight = $(window).height() - $('#header').height()