2014-07-18 2 views
0

HTML5 및 Java Script가있는 휴대 전화 용 멀티 플랫폼 앱을 개발하기 위해 휴대 전화를 펼치고 있습니다.개체의 크기를 조정하여 높이 오버플로를 피하십시오.

나는 각각의 전화가 서로 다른 디스플레이를 가질 수 있기 때문에 실제 웹 페이지 (테이블 또는 div)에 디스플레이 크기를 줄이기 위해 필요한 객체를 원한다. 따라서 자바 스크립트와 HTML을 사용하여 화면의 크기 (물론 사용할 수있는 크기) 및 높이 및 너비 내 div, 또는 내가 원하는 개체로 설정하십시오.

너비까지 작동하지만 높이가되면 스크롤 막대가 생깁니다. 나는 이것이 어디에서 왔는지 전혀 모르지만 부모 div에 정확한 크기를 부여하여 높이를 제한하는 많은 방법을 시도했습니다.

<style> 
.dummy { 
    width:100px; 
    height:100px; 
    background-color:#900; 
} 
</style> 
<script> 
var width = window.screen.availWidth + "px"; 
var height = window.screen.availHeight + "px"; 
function load() { 
document.getElementById("dummy").style.height = height; 
document.getElementById("dummy").style.width = width; 
} 
</script> 
<style> 
body { 

    margin:0px; 

    } 
.cont { 
    height:100px;} 

</style> 
</head> 



<body onload="load()"> 
<div class="cont"> 
<div class="dummy" id="dummy" onclick="load();"></div> 
</div> 
</body> 
</html> 

이 코드에는 어떤 문제가 있습니까? 내 빨간 div가 화면 높이보다 큰 이유는 무엇입니까?

감사합니다.

+0

당신이 반응하는 것을 말하는 겁니까? 부트 스트랩 (Bootstrap) 또는 래칫 (Ratchet)과 같은 것을 사용하지 않는 것이 어떻습니까? 바퀴를 재발 명할 필요가 없습니다. – pattmorter

답변

0

이 코드는 잘못된 것이 아닙니다. window.screen.availWidth에 대해 정확히 알고 있어야합니다 : 전체 높이 장치 및 상태 표시 줄입니다 (여러 문서에서는 올바르지 않지만 사실입니다). 당신이 정확히 사용할 수있는 화면은 다음과 같습니다.

var width = window.innerWidth + "px"; 
var height = window.innerHeight + "px"; 
관련 문제