javascript - 使特定部分标记为窗口的 100% 宽度和高度

Question

我有以下结构:

<section id="first">
  <div>
   <h2>Header</h2>
   <p>Des</p>
   <a href="#second">Link</a>
  </div>
</section>
<section id="second">
  <div>
   <h2>Header</h2>
   <p>Des</p>
   <a href="#first">Link</a>
  </div>
</section>

无论窗口大小如何，我都希望 section#first 的宽度为 100%，高度为 100%，然后当单击 anchor 标记时，我希望 section#second 做同样的事情，使每个部分有效地成为自己的页面。

我尝试在每个部分添加 width: 100% 和 height: 100% 但我认为需要 js 才能实现此目的？谁能告诉我如何实现这一目标？

凯尔

Answer 1

使用 width: 100%; 应该有效地将 div 保持在窗口的宽度，但高度有点棘手。

一种技术是使用javascript 来保持高度。这是一个例子。

function handleResize(){
    $("#first").height($(window).height());
}

这将设置页面加载时的高度，但随着页面大小的调整，它不会更新。

要处理调整大小，您可以绑定(bind)到 resize 事件。

$(window).bind('resize', handleResize);

您可能还需要考虑一些其他事件，例如:onorientationchange 是 iPad 在旋转时触发的事件。

为简单起见，这些代码示例使用 jQuery，但这不是必需的。

要交替显示两个页面，您可以执行以下操作:

function handleResize(selector){
    $(selector).height($(window).height());
}
function handleShrink(selector){
    $(selector).height(0);
}
$("#pageTwoLink").click(function(){
    handleShrink("#first");
    handleResize("#second");
}
$("#pageOneLink").click(function(){
    handleShrink("#second");
    handleResize("#first");
}

当然，如果您提供更多有关确切规范的信息，这可能会得到彻底清理。