根据响应布局设置固定高度窗格

Question

我有一个跟随响应式设计的webapp，并具有以下布局结构。当窗口的width > 768px和右侧布局显示时，左侧布局会显示。

根据初步研究，我认为没有现代的纯CSS方法，所以我实现了一个jQuery代码来解决它。

$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        $('.search__results').addClass('overflow-y-scroll').height(fixedHeight);
    } else {
        $('.search__results').removeClass('overflow-y-scroll').height('auto');
    }
});

我的CSS课程显示

.overflow-y-scroll {
    overflow-y: scroll;
}

我想将我的代码留在这里进行审核并寻找干密码，我认为可能会有一些改进。

  

768px被修复，是否应该从全局变量调用它是设置断点的单点？如果是的话我想知道应该放在哪里，所以SCSS和javscripts都可以使用它吗？

-

  

我应该将$（＆＃39; .search__results＆＃39;）命名为变量吗？或者甚至可以使它成为更通用的辅助函数？如是？关于如何写它的任何提示？

我也很好奇在创建这样的响应式布局时通常最好的做法。

谢谢！

==========

编辑1 :(观察）在用户启动调整大小操作之前，它不会调用。

编辑2 :(改进）可以启动延迟以防止通过px调用调整大小操作px

Answer 1

您可以在css中创建媒体查询，因此您无需一直添加和删除overflow-y-scroll。

.overflow-y-scroll-small {
      height: auto;
  }

@media screen and (max-width: 768px)
  .overflow-y-scroll-small {
      overflow-y: scroll;
  }

因此，如果屏幕大于768px，则滚动将为auto，否则为scroll。

如果需要，您还可以将元素缓存在全局变量中:(为什么双下划线btw？）

var searchResults = $(".search__results");
$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        searchResults.height(fixedHeight);
    } else {
        searchResults.height(''); //empty it so the css takes over.
    }
});

如果你真的想要专注于优化，你也可以保留一个布尔值，看看它是否更大，如下：

var searchResults = $(".search__results");
var smaller = false;
$(window).resize(function() {
    if (window.innerWidth > 768) {
        fixedHeight = window.innerHeight - $('.search__results').position().top;
        searchResults.height(fixedHeight);
        smaller = true;
    } else if (smaller){
        searchResults.height(''); //empty it so the css takes over.
        smaller = false;
    }
});

这样，每次都不会重置高度。