Javascript 是否有一种技术可以确定任何给定视口的页面折叠位置？

有许多优秀的设计能够将其内容完美地缩放和定位在页面折叠上方，使其始终位于视口中的某个位置

目前，我会使用一些javascript来确定高度，但这有使用javascript的所有常见缺点，我使用：

function fullScreenContainer() {

    // Set Initial Screen Dimensions

    var screenWidth = $(window).width() + "px";
    var screenHeight = $(window).height() + "px";

    $("#intro, #intro .item, #intro-video").css({
        width: screenWidth,
        height: screenHeight
    });

    $('#nav').affix({
        offset: {
            top: $('#intro').height()
        }
    });

    // Every time the window is resized...

    $(window).resize(function () {

        // Fetch Screen Dimensions

        var screenWidth = $(window).width() + "px";
        var screenHeight = $(window).height() + "px";

        // Set Slides to new Screen Dimensions

        $("#intro, #intro .item, #intro-video, #intro-video .item").css({
            width: screenWidth,
            height: screenHeight
        });

        $('#nav').affix({
            offset: {
                top: $('#intro').height()
            }
        });

    });
}

$(document).ready(function () {
    fullScreenContainer();
});

是否有一种css技术可以让我决定如何缩放和调整大小，使之与折叠完美匹配，无论是浏览器还是视口

---

我觉得我的Javascript解决方案太麻烦了，其他人是如何做到这一点的？

你只需要将身体、html和页眉高度设置为100%

CSS

html，正文{高度：100%；边距：0；}
标题{高度：100%；背景：#aaa；}
#主{高度：2000px；背景：#ccc；}

标题
主要的

讨论“页面折叠”可能会非常激烈。听起来像是在询问如何填充视口；你可能想改写你的问题，让这一点更清楚。@Mathletics我不太清楚该怎么说，在我看来，页面折叠和视图端口是一回事？你的建议是什么？“页面折叠”在前端开发者中引起愤怒；“视口”不是。这只是文字选择。如果你在炫耀基于百分比的高度/宽度，为什么

#main

的高度是2000px？我刚刚添加了2000px来模拟包含大量内容的主要部分。实际上，主div不需要高度，我可以用Lorem Ipsum填充该div。@Calummm谢谢，看起来太简单了！！我将尝试一下并相应地标记它。干杯。@Calummm我有一个问题，当我将此代码与其他代码结合使用时，main下面的其余内容没有考虑内容高度？请参阅（JSFIDLE）[注意内容中间的页脚。