jQuery 모바일 뷰포트 높이

헤더와 4 개의 div가 포함 된 jquery mobile을 사용하여 만든 모바일 웹 페이지가 있습니다. 머리글은 페이지의 10 %를 차지하고 나머지 90 %는 div와 동일하게 채워집니다. 다음 코드는 있지만 페이지를 채울 수 없습니다. 몇 가지 연구를 해본 결과, jquery를 사용하여 페이지 높이를 뷰포트 높이로 설정하려고 시도 했으므로 내용이 페이지 높이보다 작을 수 있다고 생각합니다. 내가 뭘 잘못하고 있을지 모르는 어떤 아이디어?jQuery 모바일 뷰포트 높이

<!doctype html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/> 
    <script src="js/jquery.js"></script> 
    <script src="js/jquery.mobile-1.4.0.min.js"></script> 
    <style> 
     #header 
     { 
      height:10%; 
     } 
     .content 
     { 
      height: 90%; 
      margin: 0px; 
      padding:0px; 
     } 

     #box1 
     { 
      width:100%; 
      height:22%; 
      border: solid 1px #000000; 
      position: relative; 
      background-color: red; 
     } 

     #box2 
     { 
      width:100%; 
      height:22%; 
      border: solid 1px #000000; 
      position: relative; 
      background-color: green; 
     } 

     #box3 
     { 
      width:100%; 
      height:22%; 
      border: solid 1px #000000; 
      position: relative; 
      background-color: blue; 
     } 

     #box4 
     { 
      width:100%; 
      height:22%; 
      border: solid 1px #000000; 
      position: relative; 
      background-color: orange; 
     } 
    </style> 

    <script type="text/javascript"> 
     function SetHeightOfDiv(){ 
      var viewportHeight = $(window).height(); 
      var theDiv = document.getElementById('home'); 
      theDiv.style.height = viewportHeight + "px"; 
     } 
    </script> 
</head> 
<body onload="SetHeightOfDiv()"> 
    <div data-role="page" id ="home"> 

     <div data-role="header" id="header" data-tap-toggle="false"></div> 

     <div data-role="content" class ="content"> 

      <div id="box1"> 
      </div> 

      <div id="box2"> 
      </div> 

      <div id="box3"> 
      </div> 
      <div id="box4"> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

출처

2014-02-28 user3366069

이 읽기 :

$(document).on("pageshow", "#home", function() { 
    SetHeightOfDiv(); 
}); 

$(window).on("resize orientationchange", function() { 
    SetHeightOfDiv(); 
});

: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

DEMO

function SetHeightOfDiv() { 
    var screen = $.mobile.getScreenHeight(); 
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight(); 
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight(); 

    /* content div has padding of 1em = 16px (32px top+bottom). This step 
    can be skipped by subtracting 32px from content var directly. */ 
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(); 

    var content = screen - header - footer - contentCurrent; 

    $(".ui-content").height(content); 
}

당신은 또한 창 크기 조정 및 위해서 orientationchange에서이 작업을 실행하는 데 필요

출처

2014-02-28 19:20:52 ezanker

완벽한 감사합니다! 지금 며칠 동안 그런 페이지를 찾고 있습니다! 아주 간단합니다. – user3366069

별도의 질문을 게시해야하지만 '반응 형 글꼴'또는 '반응 형 인쇄술'을 찾을 수 있습니다. 당신은 아마도 작은 높이에서 글꼴 크기를 변경하기 위해 미디어 쿼리를 사용하거나, 자바 스크립트로 할 수 있습니다. – ezanker

jQuery 모바일 뷰포트 높이

답변

관련 문제