用浏览器resize的三个部分
编辑：我想在阅读下面我最初写的内容之前更清楚……我正在创建一个网站，使用三个相互浮动的部分。 我使用链接从一个部分滚动到另一个部分。 滚动到该部分时，我希望该部分的背景适合浏览器屏幕大小。 如果浏览器在仍然查看页面的该部分时已经resize，我希望背景“捕捉”到窗口并继续填充屏幕。 目前，这只发生在左侧的部分。
我不确定这是否可行，但我想我会看到。 我一直在使用本网站上的单页策略教程： http ： //jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/
虽然本教程使用了许多不同的部分，但我只是让我的网站使用3或4.无论哪种方式，我都想弄清楚如何让每个部分适合浏览器窗口，无论你调整窗口大小有多大。 到目前为止，在教程和我制作的网站上，只有左边最左边的部分适合窗口。 其余部分不会resize以适应。
这是我到目前为止的代码：
HTML（我省略了容器内的内容：
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），而不是其余部分。虽然，如果你在调整浏览器大小后链接到该部分，该部分会合适。）：
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; }); function goTo(horizontal,vertical) { var browserWidth = $(window).width(); var browserHeight = $(window).height(); $('#main').animate({ marginLeft: '-'+browserWidth*horizontal, marginTop: '-'+browserHeight*vertical, }, 1000); }
我希望你明白我想要完成的事情。 我是新手，所以如果我的编码很乱，我道歉。 如果你能帮助我找到解决方案，我真的很感激！ 谢谢。
我相信我明白你在问什么。 我刚刚在我的网站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
如果我理解正确，请告诉我。