Question

我正在开发一个目录，并希望Google Map能够做出响应，所以我必须在JS中将高度定义为100％。以下是我使用过的代码：

var mapdiv = document.getElementById("company_map"); 
mapdiv.style.width = '1000px'; 
mapdiv.style.height= '205px';

geocoder = new google.maps.Geocoder(); 
var map = new google.maps.Map(mapdiv, myOptions);

所以我需要更改mapdiv.style.height =＆＃39; 205px＆＃39 ;;到mapdiv.style.height =＆＃39; 100％＆＃39 ;;但％不起作用。

Answer 1

获取父级高度并将其设置为像素，因为100％表示父元素的完整高度

var mapdiv = document.getElementById("company_map"),
    parent = mapdiv.parentNode;

mapdiv.style.width  = '1000px';
mapdiv.style.height = parent.clientHeight + 'px';

geocoder = new google.maps.Geocoder();

var map = new google.maps.Map(mapdiv, myOptions);

Answer 2

works for me...

的CSS：

body, html{
  height: 100%;
}

div{
  background-color: red;
}

JS：

var div = document.getElementById('company_map');
div.style.width = '200px';
div.style.height = '200px';

div.onclick = function(){
    div.style.height = '100%';
};

确保在父元素上设置高度，否则100％没有意义......

JS的高度100％

2 个答案: