Javascript 制作一个100%宽度和高度的窗户的特定剖面标签

我的结构如下：

<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>

标题
Des

标题
Des

我希望section#首先是宽度100%，高度100%，无论窗口大小如何，然后在单击锚定标记时，我希望section#第二步也这样做，使每个部分有效地成为自己的页面

我试着在每个部分添加宽度：100%和高度：100%，但我认为js是实现这一点所必需的？有谁能就如何实现这一目标向我提供建议

---

凯尔

使用

宽度：100%

应该有效地将div保持在窗口的宽度，但是高度有点复杂

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

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

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

要处理调整大小，可以绑定到

resize

事件

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

您可能还需要考虑一些其他事件，例如：<代码> ONIONTRONATORATIONS 是iPad在旋转时引发的事件。< / P> 为了简单起见，这些代码示例使用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");
}

---

当然，如果您提供一些关于确切规格的更多信息，这可能会被彻底清除。

使用

宽度：100%

应该有效地将div保持在窗口的宽度，但是高度有点复杂

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

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

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

要处理调整大小，可以绑定到

resize

事件

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

您可能还需要考虑一些其他事件，例如：<代码> ONIONTRONATORATIONS 是iPad在旋转时引发的事件。< / P> 为了简单起见，这些代码示例使用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");
}

---

当然，如果您提供一些关于确切规格的更多信息，这可能会被彻底清除。

太好了！不需要javascript！它类似于easy css的两个部分：

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

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

---

演示：

太棒了！不需要javascript！它类似于easy css的两个部分：

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

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

---

演示：

通过将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();
});

---

通过将“位置”特性设置为“固定”，可以允许两个截面存在于同一个点中

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

然后，您可以使用javascript更改哪一个是可见的：

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

---

你说每个页面都有自己的页面是什么意思？如果它们都是100%的高度和宽度，一个将重叠另一个。。。或者这就是你想要的行为？@mrBorna我想要#第一个占据整个浏览器窗口，无论大小，#第二个只应在选择a标记或用户滚动时出现。你说的每个页面都是什么意思？如果它们都是100%的高度和宽度，一个将重叠另一个。。。或者这就是你想要的行为？@mrBorna我想要#首先占据整个浏览器窗口，无论大小，#第二个应该只有在选择了a标记或用户滚动hanks@idbentley时才能看到基本上我只想确保section标记占据浏览器窗口的全宽和全高，并且可以调整大小。然后，我想在锚定标记中添加一个scrollto，它将滚动到下一个/prev部分在使用javascript之前总是使用css耗尽您的选项。许多浏览器（尽管很糟糕）没有启用javascript。除了这个特殊的解决方案之外，整个事情都可以通过

section#first:target，section#second:target{width:100%；height:100%；}

来完成，它无论如何都要短一些

height:100%

在css中是一个特别易怒的项目。在很多情况下，它都无法达到预期效果。感谢@idbentley基本上我只想确保section标记占据浏览器窗口的整个宽度和高度，并且可以根据大小进行调整。然后，我想在锚定标记中添加一个scrollto，它将滚动到下一个/prev部分在使用javascript之前总是使用css耗尽您的选项。许多浏览器（尽管很糟糕）没有启用javascript。除了这个特殊的解决方案之外，整个事情都可以通过

section#first:target，section#second:target{width:100%；height:100%；}

来完成，它无论如何都要短一些

height:100%

在css中是一个特别易怒的项目。在很多情况下，它都无法达到预期效果。@mrBoma section#首先，它没有占据整个浏览器窗口，100%的高度不适用？您必须将它放在一个高度为100%的容器（例如body）中，因为它占满了父容器的100%；因此，将父容器的css设置为高度：100%；给你：@mrBoma section#首先没有占据整个浏览器窗口，100%的高度不适用？你必须把它放在一个高度为100%的容器（例如body）中，因为它占据了父容器的100%；因此，将父容器的css设置为高度：100%；干得好：