javascript - 窗口调整大小不起作用

Question

我已经为问答测验做了标记。

当我尝试调整窗口大小时，我得到了无效的高度和宽度值。例如:在移动视口(viewport)上，我得到以下值 height: 9428992px; width: 880px; !!!!?

下面是我如何获取文档的高度和宽度:

$.getDocHeight = function(){
 var D = document;
 return Math.max(
  Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
  Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
  Math.max(D.body.clientHeight, D.documentElement.clientHeight)
 );
};

$.getDocWidth = function(){
 var D = document;
 return Math.max(
  Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
  Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
  Math.max(D.body.clientWidth, D.documentElement.clientWidth)
 );
};

所有 html、css 和 jQuery 代码都是 here在 SO 节省空间。

我不确定为什么会这样。是我的 CSS 还是 HTML 结构？!!!
我还发现了 <section class="bottom row">....</section填充了下部直到窗口结束，但它的大小超过了可见窗口(条款和条件部分未显示)。

我不知道更好的 html 结构是否可以解决这个 JS 问题!

非常感谢您的帮助!

谢谢。

更新

这是我想要完成的，也许我的结构或风格不正确。

用户希望打开页面并看到第一部分填满屏幕。红色部分填充顶部，然后蓝色填充“窗口/页面”的其余部分。因此，用户应该看到所有上下文从顶部图像开始，以右下角的“条款和条件”结束。

当用户点击“开始测验”时，<div class="section">...应该动画到顶部和<div id="section-1">..会取代它。

之后，当用户点击“TRUE”或“FALSE”时，窗口应该动画到右侧部分以查看 <class class="answer">部分了解更多详情。它有一个“下一步”按钮。当用户点击它时，窗口应该动画显示一个新的部分“....”。

等等。这就是整个想法。希望这解释了每个部分的流程。

谢谢。

Answer 1

首先去掉你用过的不必要的分号

function sizeUpdate(){
        widnowHeight = $.getDocHeight();
        widnowWidth  = $.getDocWidth();
        $('#value').html(widnowHeight);

        $(".section").css("height", widnowHeight);
        $(".section").css("width", widnowWidth);

        if (selected_section == 2){
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-1").css("margin-left", widnowWidth*-1);
        };//Semicolon not required

        if (selected_section == 3) {
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-2").css("margin-top", widnowHeight*-1);

          $("#section-1").css("margin-left", widnowWidth*-1);
          $("#section-2").css("margin-left", widnowWidth*-1);
        };//Semicolon not required

        if (selected_section == 4) {
          $("#section-1").css("margin-top", widnowHeight*-1);
          $("#section-2").css("margin-top", widnowHeight*-1);
          $("#section-3").css("margin-top", widnowHeight*-1);

          $("#section-1").css("margin-left", widnowWidth*-1);
          $("#section-2").css("margin-left", widnowWidth*-1);
          $("#section-3").css("margin-left", widnowWidth*-1);
        };//Semicolon not required
      };//Semicolon not required

这里是代码，只是检查它似乎工作正常 http://jsbin.com/yesenutoki/1/edit?html,css,js