位置谷歌地圖與側邊欄右側固定頭頂部

我在找一個定位谷歌地圖的div上顯示列表右側的側邊欄。我想這樣做，所以窗口不滾動，頁面內容在調整屏幕大小時是流暢的。位置谷歌地圖與側邊欄右側固定頭頂部

我以前試圖使用盒大小類似如下：

#map-wrapper * { 
    box-sizing: border-box !important; 
    -moz-box-sizing: border-box !important; 
    -khtml-box-sizing: border-box !important; 
    -webkit-box-sizing: border-box !important; 
    -ms-box-sizing: border-box !important; 
    } 
    #map-container { 
    position: absolute; 
    width: 100%; height: 100%; 
    margin: 0; 
    overflow: hidden; 
    border-top: 50px solid transparent !important; border-right: 350px solid transparent !important; 
    }

這將啓動試圖在側邊欄的滾動列表時成爲一場噩夢。有沒有人有一個很好的解決方案，還是我在正確的軌道與框大小？

來源

2013-02-28 AKN

這是一個CSS問題。與地圖無關。 – Rafe 2013-03-01 04:08:04

箱尺寸是這樣的事情純粹是可選的。有很多方法可以解決這個問題，但我擁有一種簡單的方法，在IE6等舊瀏覽器中運行良好。

對於您嘗試創建的各種框架（側欄和Gmaps /內容框架），請創建一個設置position:absolute; overflow:auto;的css規則。現在，您可以利用CSS絕對定位中的一個很酷的技巧。如果您在CSS中同時設置了top和bottom，則會自動計算高度。寬度使用左/右也一樣。所以要讓我們的兩個div 100％高度設置爲top: 0; bottom:0;。

如果你想在側邊欄是300像素寬，固定在右，然後設置width:300px; right:0;。對於內容div，請設置爲right:300px; left:0;。

現在，您需要防止身體滾動條出現。首先，你需要將它們設置爲0。另外，除去從身體默認保證金/填充，需要設置HTML &身體height:100%;（100％等於可視面積高度），其他明智的，他們默認爲auto這是內容的高度。這也是明智添加overflow:hidden身體，因爲有些瀏覽器認爲`體{身高：100％;}意味着他們需要顯示滾動條。

Here is a quick mockup on JS fiddle showing you how this works.

來源

2013-03-04 05:00:13 Elimn

Elimn的建議並沒有爲我工作，但下面沒有（我創建了谷歌地圖上方的標題欄）：

body { height: 100%; margin: 0; padding: 0; overflow: hidden; } 
#map-canvas { height: 100%; overflow: auto; }

在機身：

<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div> 
<div id="map-canvas"></div>

來源

2013-12-01 03:11:30

位置谷歌地圖與側邊欄右側固定頭頂部

回答

相關問題