的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滾動和漿紗

回答

相關問題