javascript - 有没有一种技术可以确定任何给定视口(viewport)的页面折叠位置？

Question

有许多出色的设计设法将其内容完美地缩放和定位在页面折叠上方，以便它始终位于视口(viewport)中的特定位置。

目前我会使用一些 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 技术可以让我确定如何缩放和调整大小以完美匹配折叠，无论浏览器或视口(viewport)如何。

我觉得我的 Javascript 解决方案太麻烦了，其他人如何解决这个问题？

Answer 1

你只需要将你的body、html和header高度设置为100%；

CSS

html, body {height:100%; margin:0;}

header {height:100%; background:#aaa;}

#main {height:2000px; background:#ccc;}

<header>
    header
</header>
<div id="main">
    main
</div>