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>

我希望第一节＃宽度为100％，高度为100％，无论窗口大小是多少，然后单击锚标签时我想要第二节这样做，使每个节有效地成为自己的页面。< / p>

我已尝试为每个部分添加宽度：100％和高度：100％，但我认为js是实现这一目标所必需的？任何人都可以告诉我如何实现这一目标吗？

凯尔

Answer 1

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

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

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

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

要处理调整大小，您可以绑定到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");
}

当然，如果您提供有关确切规范的更多信息，可以彻底清理它。

Answer 2

大！不需要javascript！它像2个简单的css部分：

  section#first{
    background:darkkhaki;
  }
  section#second{
    background:darkseagreen;
  }

  section#first:target,section#second:target{
    width:100%;
    height:100%;
  }

DEMO：http://jsbin.com/emeyag/edit

Answer 3

通过将position属性设置为fixed，可以使两个部分存在于同一位置。

section{ position:fixed; top:0;bottom:0;left:0;right:0;}

然后你可以使用javascript来改变哪一个是可见的：

$('a').click(function(){
  $(this).closest('section').hide();
  $($(this).attr('href')).show();
});

使特定的部分标签100％宽度和窗口高度

3 个答案: