基于视口的动态截面高度

Question

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

例如：用户正在浏览www.mysite.com/#aboutus，但在高分辨率下，您可以看到之前的（＃home）和next（#portfolio）部分内容和背景。

所以我有三个问题：

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

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

$(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中的媒体查询来实现。您可以为每个设备编写单独的css。 例如： -

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