2013-06-13 3 views
0

지도의 높이가 자동으로 기기의 화면과 일치하도록하고 싶습니다 ... 하지만 스타일을 자동, 100 %, screen.height로 변경하면지도가 사라집니다. ... 높이를 만드는 방법은 자동입니까? 이 대신 : 이 당신이 다음과 같이 할 수있는 jQuery를 사용하는 경우 난 그냥style.height doesnt work javascript

<div id="home" data-role="page"> 
    <div data-role="header"> 
    *my header* 
    </div> 

    <div data-role="content"> 
     <div id="map_canvas"></div> 
    </div> 
</div> 
+0

#map_canvas , map_canvas –

+0

#map_canvas를 사용하면 스크립트가 작동하지 않습니다 ... 왜 사용하지 않았습니까 # –

+0

js 디버거가 동의합니까? try $ ('# map_canvas'). css ('height', 'auto'); –

답변

0

라고

된 index.html에서
$('#home').live('pagecreate',function(){ 
document.getElementById('map_canvas').style.width=screen.width; 
document.getElementById('map_canvas').style.height="20em"; 
}); 

내 코드 ...

script.js입니다 :

document.getElementById('map_canvas').style.width=screen.width; 
document.getElementById('map_canvas').style.height="20em"; 

$("#map_canvas").css({ 
    'width':screen.width, 
    'height':"20em" 
}); 
+0

대단히 고마워요 .... 작동합니다 ... 나는 높이가 자동이되기를 원합니다 ... 그래서 나는 "screen.height"없이 높이를 변경합니다 ... "그러나 형식은 ..... –

0

다음을 확인하십시오. example : 저는 귀하의 문제가 CSS와 관련이 없다고 생각합니다. 부모가 비어있는 경우 상위 높이를 기준으로합니다 설정하려면, 그래서 % 높이 0의 100 %가 0이 될 것이다 : check this

코드 예제 : 처음에

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<body> 
<style> 
#map_canvas{ 
    background-color:#00F; 
    } 
#cont{ 
    background:#F00; 
    height:200px; 
    } 
</style> 
<button onClick="doit1()">Click me to put something in map_canvas</button> 
<button onClick="doit()">Click me to make the height 100%</button> 

<div id="home" data-role="page"> 
    <div data-role="header"> 
    *my header* 
    </div> 

    <div id="cont" data-role="content"> 
     <div id="map_canvas"></div> 
    </div> 
</div> 
</body> 
<script> 
$('#home').live('pagecreate',function(){ 
$('#map_canvas').css('height','auto'); 
}); 
function doit(){ 
    $('#map_canvas').css('height','100%'); 
    } 
function doit1(){ 
    $('#map_canvas').html('a') 
    } 
</script> 
</html>