Question

有许多出色的设计可以完美地缩放和定位页面上方的内容，使其始终位于视口中的某个位置。

目前我会使用一些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解决方案过于繁琐，其他人如何做到这一点？

Answer 1

您只需将身体，html和标题高度设置为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>

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

1 个答案: