我已经在一些网站上看到了一种效果，它们为您提供了本质上是垂直的“页面”，每个页面都填满了浏览器窗口。例子：
http://www.weworkonsunday.com/
第一个更干净，更复杂。
我一直在想如何实现这个效果。如果高度不是问题，那么使用页面锚点等就足够简单了，但是填充窗口的垂直方向（以及宽度）是让我失望的原因。
我是否缺少一种简单的方法？还是都是一些复杂的 java 蠢事？
非常感谢您的帮助
【问题讨论】：
标签： html css height liquid-layout
从概念上讲，我会构建一个带有堆叠 div 的垂直页面，所有这些都具有相同的类，该类响应窗口的高度（并且在调整浏览器大小时也会响应）。使用 jQuery 的未经测试的代码：
<div id="page1" class="page">content</div>
<div id="page2" class="page">content</div>
<div id="page3" class="page">content</div>
<script>
// set up onResize event handler
window.onresize = onResizeScreen;
// run onResize event handler once on load
$.(function() { onResizeScreen(); });
// onResize event handler
function onResizeScreen(event) {
$(".page").attr("height", screen.height);
}
// function to scroll to specific page
function gotoPage(pageNumber){
window.scroll(screen.height*pageNumber-1);
}
</script>
<style>
.page {
width: 100%;
}
</style>
您对解决这类问题听起来很陌生。如果您不知道上述内容的含义，请检查 jQuery 并处理 JavaScript 事件。
【讨论】：
此结果确实需要一些 javascript 专业知识（以您的示例中实现的方式）。
有一个 jquery 库试图简化这个过程。
http://stephband.info/jparallax/
即使没有真正简单的实现方法。效果非常依赖于布局并且是一种“新”的网站制作方式的原因之一......需要一些时间才能有人解决这个问题。
这是另一个示例，说明如何在没有库帮助的情况下按照您描述的方式实现视差。
如何：http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ 演示：http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html
如果您搜索“视差滚动”，您会发现很多其他资源。
【讨论】：