基于视口的动态截面高度

Question

我开发了一个带有锚点平滑滚动导航的全屏背景垂直主题。我正在尝试根据视口高度调整背景部分，因为在高分辨率下，一些用户即使在特定锚点上导航也可以看到下一个和上一个部分。

例如：用户正在浏览 www.mysite.com/#aboutus，但在高分辨率下您可以看到上一个 (#home) 和下一个 (#portfolio) 部分的内容和背景。

所以我遇到了三个问题：

考虑到只有一个页眉和一个固定位置和高度的页脚，所有背景都必须适应视口
该部分必须在调整大小和加载时适应视口高度
正文必须滚动到适应视口初始大小或调整大小的特定锚点

对于第一个问题，我使用此脚本动态设置高度

$(function(){
    $(window).load(function(){ // On load
        $(window).load(function(){ // On load
            $('#section_name').css({'height':(($(window).height()))+'px'});
            $('#section_name').css({'margin-bottom':'200px'});


        });

我尝试动态添加 margin-bottom 来下推下一节内容。目的是使背景和部分内容适应视口高度，以避免在高分辨率下看到上一个和下一个部分。

谁能帮帮我？

Answer 1

这可以在 css.You 中的媒体查询的帮助下实现，可以为每个设备单独编写 css。例如：-

@media screen and ( max-height: 600px ){
    body {
           height:600px;
    }
}

基于视口的动态截面高度

Dynamic section height based on viewport

jquery

height

dynamic