Javascript 基于响应布局设置固定高度窗格

我有一个Web应用程序，它遵循响应性设计，并具有以下布局结构。当窗口的

宽度>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和JAVScript都可以使用它

-

我是否应该将$（'.search\u results'）命名为变量？或者甚至让它成为一个更通用的助手函数？如果有的话？关于如何写它有什么建议吗

我也很好奇，当创建这样的响应性布局时，通常最佳实践是什么

谢谢

==========

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

---

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

您可以在css中创建媒体查询，这样您就不必一直添加和删除

溢出y滚动

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

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

因此，如果屏幕大于768px，则滚动将是

自动

，否则将是

滚动

如果需要，还可以将元素缓存在全局变量中：（顺便说一句，为什么要使用双下划线？）

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

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;
    }
});

---

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

你知道@media css标签吗？w3schools.com/cssref/css3_pr_mediaquery.asp（是的，当你发布时重复回答；）是的@Jordumus。但是，高度必须是固定的，并且具有一个值，该值在每次调整窗口大小时都会更改。因此，我认为media query无法完成这项工作？就高度而言：确实如此，但您可以通过这种方式更改overflow-y-scroll类，即它仅在屏幕小于css中的X像素时触发，这样您就不必一直添加/删除它。：）基本上，我正在尝试实现类似的布局，如本网站所示：@Jordumus是的，的确如此，你是对的：）

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;
    }
});