的CSS滚动和浆纱

-1

我有一个非常简单的问题的CSS滚动和浆纱

随着图片：

我想在地图上是完全静态的，并采取了高度的100％，而另一部分如果没有筛选器可以滚动，则可以滚动并采取所有屏幕的其余部分并做出响应。

的那一刻我已经手动将

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

和

.map{ 
    height: 1000px; 
}

我只是有一个小的CSS问题就在这里。

如果有人能帮助我与我会很高兴，在此先感谢！

编辑：也许有一个与什么，我选择在HTML中的一个问题：

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

地图和结果都在一个div。

我现在使用的框架基础

来源

2017-07-12 Raphael ABADIE-MOREAU

将这个CSS的DIV在地图上的代码。

overflow-x：scroll; 身高：100％;

来源

2017-07-12 13:44:35

为什么溢出属性？我不认为这会解决问题 – flosommerfeld

是的，我也没有看到如何溢出滚动可以帮助我。不幸的是，100％不工作，它没有采取屏幕的全高：/ –

您可以从height:100vh和position:fixed开始到地图包装。

来源

2017-07-12 13:47:02

你可以给地图

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

同样与过滤。高度：1000将只在顶部

留下空白区域（抱歉不能发表评论）

来源

2017-07-12 13:49:54 Adi

这是行不通的 –

你给了它一个z-index？如果你想要它坚持在屏幕上，你需要给它一个高Z值，任何值，只要它是你给出的最高值。或者尝试给出地图 top：0; bottom：0;例如：。map { position：fixed; top：0; bottom：0; z-index：1030;} 如果你的地图没有占用全部高度，你可能需要调整它的大小。 – Adi

z-index并没有解决问题，因为它对于组件的显示顺序以及它们是否可以在另一个之前是一个 –

这css将解决您的地图在top-right角落100%高度

你可以通过这个css

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

来源

2017-07-12 13:55:18

的CSS滚动和浆纱

回答

相关问题