Question

编辑：在阅读下面我最初写的内容之前，我想更清楚一点...... 我正在使用三个相互左移的部分创建一个网站。我使用链接从一个部分滚动到另一个部分。滚动到该部分时，我希望该部分的背景适合浏览器屏幕大小。如果浏览器在仍然查看页面的该部分时已经调整大小，我希望背景“捕捉”到窗口并继续填充屏幕。目前，这只发生在左侧的部分。

我不确定这是否可行，但我想我会看到。我一直在使用本网站上的单页策略教程： 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>

我希望你明白我想要完成的事情。我是新手，所以如果我的编码很乱，我道歉。如果你能帮助我找到解决方案，我真的很感激！感谢。

Answer 1

我相信我明白你在问什么。我刚刚在我的网站michaelagarrison.com上完成了这个（你可以在http://www.michaelagarrison.com/assets/js/main.js查看我的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>

如果我理解正确，请告诉我。

用浏览器调整大小的三个部分

1 个答案: