三段调整随着浏览器(Three Sections To Resize With Browser)

编辑：我想读什么我原来写在下面......我创建使用左浮动彼此的三个部分网站之前，使之更清楚。 我使用链接来滚动从一个部分到另一个。 当滚动到这一节，我要的那款背景以适应浏览器的屏幕尺寸。 如果仍时查看页面的那款浏览器，然后调整，我希望背景“捕捉”到窗口，并继续填充屏幕。 目前，这仅与在左边一路的部分发生。

我不知道这是可能的，但我想我会看到的。我已经工作过的一个页面策略对本网站教程： http://jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/

虽然本教程使用许多不同的部分，我只是在做我的网站使用3或4。无论哪种方式，我试图找出如何让每一个部分，以适应浏览器窗口，无论你多么大或小的调整窗口的大小。到目前为止，在本教程中，而我所做的网站上，只有部分最远到左边与窗口相符。该段的其余部分不会进行调整，以适应。

这里是我到目前为止的代码：

HTML（我省略了那名集装箱里面的内容：

<div id="main">

<section id="artwork" class="box">
</section>


<section id="home" class="box">
</section>


<section id="contact" class="box">
</section>

</div>

CSS（尝试使用100种％的宽度和高度的部分，以及背景尺寸：封面，但没有奏效）：

.box {
float:left;
}

#artwork {
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

#home {
background: #58267a;
with:100%;
height:100%;
background-size:cover;
}

#contact{
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

脚本（从教程取为好，其中，正如我所说，只是调整的第一部分框的大小，（#artwork，），而不是休息。尽管如此，如果你链接到该节过后调整浏览器，一节会合适的。）：

<script type="text/javascript">
function resizeBoxes() {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').css({
width: browserWidth*3,
});


$('.box').css({
width: browserWidth,
height: browserHeight,
});

}

resizeBoxes();

$(window).resize(function() {
resizeBoxes();
});


$('nav ul li a').click(function(){
return false;
});
</script>

<script type="text/javascript">
function goTo(horizontal,vertical) {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').animate({
    marginLeft: '-'+browserWidth*horizontal,
    marginTop: '-'+browserHeight*vertical,
}, 1000);

}
</script>

我希望你明白我试图完成。我是新来的这一点，所以这所以如果我的编码是一个烂摊子，我道歉。我真的很感激，如果你能帮我想想办法！谢谢。

我相信我明白你的要求。我刚刚完成我的网站上这样做michaelagarrison.com （您可以查看我的JS文件http://www.michaelagarrison.com/assets/js/main.js ）。我的网站上它改变每个的高度section的标签来修复浏览器窗口的高度的高度。所有你需要做的就是用我的jQuery脚本的这个修改后的版本：

$(document).ready(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    // Now set the height / width to the browser height / width in css
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  // Replace TagNameHERE with the correct tag you want resized
  $('TagNameHERE').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  // This will handle the resize
  $(window).resize(function() {
    $('TagNameHERE').each(function(){
      resizeSection(this);
    });
  });
});

这很奇怪，在100％的宽/高没有工作。在我最初的剧本我只是用衬垫，以获得正确的高度。请注意，您将需要下面的代码我的脚本工作：

// Put this line in the head.  You can also use a local jQuery file if you wish
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

让我知道如果我理解正确的。