Html Css滚动和调整大小

我有一个非常简单的问题

图片如下：

我希望地图是完全静态的，并采取100%的高度和其他部分是可滚动的，没有过滤器是可滚动的，并采取了所有屏幕的其余部分，并作出反应

目前，我已将

 .searchresults {
  overflow-y: scroll;
  height: 600px;
}

及

我只是有一个小小的css问题

如果有人能帮我，我会很高兴的，提前谢谢

编辑：我在html中选择的内容可能有问题：

<div class="small-12 large-4  columns mapblock">
    <div class="responsive-embed map">
      <div id="map"></div>
    </div>
  </div>

地图和结果在一个div中

---

我正在使用frameworkfoundation

将这个CSS放在映射代码所在的div中

溢出-x：滚动；

---

身高：100%

您可以从地图包装器的

高度：100vh

和

位置：fixed

开始

你可以把地图给我

position:fixed;
height: 100%;
margin: 0;

过滤器也是如此。高度：1000只会在顶部留下一个空白

---

（抱歉，无法发表评论）

此

css

将您的地图固定在

右上角
高度为
100%
的位置

您可以浏览此
css

.map{
   position: fixed;
   height: 100%;
   top:0;
   right:0;
   margin:0;
   padding:0;
}

为什么选择溢出属性？我不认为这会解决问题是的，我也是，我不知道溢出卷轴在这方面能帮我什么忙。不幸的是，100%不起作用，它没有占据屏幕的全部高度：/你给它一个z索引了吗？如果你想让它贴在屏幕顶部，你需要给它一个高的z指数，任何值，只要它是你给的最高值。或者尝试为地图顶部指定：0；底部：0；示例：。映射{位置：固定；顶部：0；底部：0；z索引：1030；}如果你的地图没有占据整个高度，你可能需要调整它的大小。z-index根本不能解决问题，因为它取决于组件显示的顺序，以及它们是否可以一个在另一个之前是的，如果你要修复它，你希望该元素始终位于其他元素之上。
.map{
   position: fixed;
   height: 100%;
   top:0;
   right:0;
   margin:0;
   padding:0;
}