Nội dung sử dụng tất cả không gian có sẵn với jQuery Mobile

Tôi có một dự án với jQuery Mobile + phonegap và tôi có một số vấn đề với chân trang và nội dung div.Nội dung sử dụng tất cả không gian có sẵn với jQuery Mobile

Một cơ bản trang jQuery Mobile trông như thế này:

<div data-role="page" data-theme="b" id="map"> 

    <div data-role="header" data-theme="b" data-position="inline"> 
     <a href="#" data-rel="back" data-icon="arrow-l">Back</a> 
     <h1>MAP</h1> 
    </div><!-- /header --> 

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

    <div data-role="footer" data-theme="d"> 
     <h4>TEST</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

Bây giờ tôi đang cố gắng để tải bản đồ google trong nội dung vì vậy tôi sử dụng này trong JavaScript:

$('div').live("pageshow", function() 
{ 
    var myOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
}

Và đây là kết quả:

Page with footer after content

Vấn đề là chân r không dính vào đáy trừ khi bạn chỉ định các thuộc tính data-position="fixed" như thế này:

<div data-role="footer" data-theme="d" data-position="fixed"> 
    <h4>TEST</h4> 
</div><!-- /footer -->

Đó là tốt nhưng vấn đề là bản đồ được tải trước jquery di động chụp chân xuống phía dưới, kết quả là tôi có điều này trang:

Page with footer fixed

Nơi bạn có thể xem bản đồ chỉ sử dụng không gian còn lại trước khi nó chuyển đến phía dưới.

Câu hỏi của tôi là .. tôi nên chờ đợi sự kiện gì hoặc tôi cần thêm gì vào mã của mình để tải bản đồ để nó sẽ sử dụng tất cả không gian giữa đầu trang và chân trang?

Nguồn

2012-02-28 SERPRO

Bạn không cần phải đợi một sự kiện, bạn cần đặt chiều cao của thành phần .ui-content thành thứ gì đó quanh 100%.

Dưới đây là một phương pháp CSS hoàn toàn đạt được 100% chiều cao cho một jQuery Mobile pseudo-page:

/*make sure the viewport is 100% height*/ 
html, body { 
    height : 100%; 
} 

/*make the page element 100% height*/ 
#map-page { 
    height : 100%; 
} 

/*specify a height for the header so we can line-up the elements, the default is 40px*/ 
#map-page .ui-header { 
    height : 40px; 
} 

/*set the content to be full-width and height except it doesn't overlap the header or footer*/ 
#map-page .ui-content { 
    position : absolute; 
    top  : 40px; 
    right : 0; 
    bottom : 30px; 
    left  : 0; 
} 

/*absolutely position the footer to the bottom of the page*/ 
#map-page .ui-footer { 
    position : absolute; 
    bottom : 0; 
    left  : 0; 
    width : 100%; 
    height : 30px; 
}

Dưới đây là một bản demo: http://jsfiddle.net/jasper/J9uf5/2/

Nguồn

2012-02-28 17:09:39 Jasper

Xin chào .. Cảm ơn bạn đã gợi ý. Nếu tôi sử dụng tất cả CSS đó, ứng dụng sẽ phát điên và không hoạt động bình thường .. nhưng nếu tôi chỉ thêm phần này: http://pastebin.com/JPUTjB0N nó hoạt động tốt với jQuery Mobile .. Vui lòng chỉnh sửa câu trả lời của bạn để đánh dấu nó đúng. – SERPRO

Cảm ơn giải pháp. Tôi đã tìm kiếm điều này trong một thời gian khá dài. – WhatsInAName

Giải pháp này thực sự đã giúp tôi cho jQM v1.2.0. Cảm ơn bạn! – themanatuf

Cái này cũng làm việc:

<html> 
<head> 
<meta name="viewport" id="viewport" 
    content="width=device-width, height=device-height, 
    initial-scale=1.0, maximum-scale=1.0, 
    user-scalable=no;" /> 
</head> 
<body> 
    .... 
    <div data-role="header" data-position="fixed"> 
    .... 
    <div data-role="footer" data-position="fixed"> 
    .... 
</body> 
</html>

Nguồn

2013-02-22 20:36:16 sherif

Đẹp ... như một số thông tin bổ sung cho người khác: Trong các trình duyệt hỗ trợ vị trí CSS: cố định (hầu hết các trình duyệt trên máy tính để bàn, iOS5 +, Android 2.2+, BlackBerry 6 và các thiết bị khác), thanh công cụ sử dụng plugin "fixedtoolbar" cố định ở trên cùng hoặc dưới cùng của chế độ xem, trong khi nội dung trang cuộn tự do ở giữa. Trong các trình duyệt không hỗ trợ định vị cố định, các thanh công cụ sẽ vẫn được định vị trong luồng, ở đầu hoặc cuối trang. Để bật hành vi này trên đầu trang hoặc chân trang, hãy thêm thuộc tính data-position = "fixed" vào phần tử đầu trang hoặc chân trang của jQuery Mobile. – Badrush

Chỉ cần thêm css này:

<style> 
    #map{ 
     height: 0; 
    } 

    #map_canvas { 
     height: 100%; 
     padding: 0; 
     text-shadow: none; 
    } 
</style>

Nguồn

2013-05-09 22:29:03

Tôi không hiểu tại sao làm cho chiều cao của bố mẹ 0 và con muốn 100% làm cho công việc này, nhưng điều này làm việc tuyệt vời. – dk123

Nội dung sử dụng tất cả không gian có sẵn với jQuery Mobile

Trả lời

Các vấn đề liên quan