無法設置地圖的DIV高度的OpenLayers地圖

此代碼使地圖的DIV最大寬度，但高度爲0（％值無關緊要，它總是0）無法設置地圖的DIV高度的OpenLayers地圖

<div id="map" style="width: 100%; height: 100%;"></div>

這工作，因爲它集地圖的div到一個固定的大小，但顯然不是我想要的。

<div id="map" style="width: 100%; height: 500px;"></div>

有沒有人體會到這一點？任何人有關如何解決這個問題的建議？

我也使用jQuery（-Mobile）

感謝

來源

2012-10-14 MJB

這是我的解決辦法：

function fixContentHeight(){ 
    var viewHeight = $(window).height(); 
    var header = $("div[data-role='header']:visible:visible"); 
    var navbar = $("div[data-role='navbar']:visible:visible"); 
    var content = $("div[data-role='content']:visible:visible"); 
    var contentHeight = viewHeight - header.outerHeight() - navbar.outerHeight(); 
    content.height(contentHeight); 
    map.updateSize(); 
}

的情況下，你使用jquery

來源

2012-10-16 09:09:26 MJB

你需要付出100％的高度，以HTML和身體：

html, body { 
height: 100%; 
}

來源

2012-10-16 08:57:11 winsent

但地圖div本身仍然需要真正的px值而不是百分比afaik。 –

這爲我工作，也設置#map {width：100％;身高：100％;} – tomasofen

，這個完美的作品爲「拉伸」地圖的div容器拿着它，notmatter你[R CSS已經設置地圖：

$(window).resize(function() { 
     //$('#log').append('<div>Handler for .resize() called.</div>'); 
     var canvasheight=$('#map').parent().css('height'); 
     var canvaswidth=$('#map').parent().css('width'); 

     $('#map').css("height", canvasheight); 
     $('#map').css("width", canvaswidth); 

    });

你會調用這個BTW早，最好在$（文件）。就緒（函數（）{/ *這裏* /}塊。

來源

2012-10-16 21:12:05

我加入解決了這個對我的用例：

setInterval(function(){map.updateSize();}, 500);

更新：這是不孤獨的人是我下的OpenLayers 3.做我這樣做，而使用的OpenLayers 2.我不是說它很漂亮，但它足夠滿足我需要的東西。

來源

2015-02-26 22:06:21

，因爲你運行該代碼每500ms這很浪費，但。這不是你想要做的。見我還是格倫的回答一個更清潔的方式 – MJB

咩，這是很好的我在做什麼。 –

它不設置地圖的大小，地圖變得失真。 – olga

我就遇到了這個話題，因爲我想設置地圖高度離子標籤（ionicframework）至100％。儘管這不是最初的問題，但其他人也可能遇到同樣的問題。除了以前的建議，你必須設置類的高度。滾動到100％：

html, body { 
    width: 100%; 
    height: 100%; 
} 

.scroll { 
    height: 100%; 
} 

#map { 
    height: 100%; 
}

來源

2016-09-07 13:50:10 Lars

對於具有同樣的問題如上述的那些，只是設定<離子含量滾動=「假」>並沒有更多的需要CSS –

無法設置地圖的DIV高度的OpenLayers地圖

回答

相關問題