Как изменить размер содержимого div, чтобы охватить всю область содержимого в jQuery Mobile - PullRequest
Новая
       16

Как изменить размер содержимого div, чтобы охватить всю область содержимого в jQuery Mobile

0 голосов
/ 18 января 2011

Я запустил простую мобильную страницу jQuery с заголовком и содержимым. Контент div должен служить контейнером карты для openlayers. Карта должна заполнить весь экран, кроме строки заголовка.

Определение размера содержимого div с шириной / высотой 100% не сработало (ничего не отображалось), поэтому я ищу CSS-подход к размеру пикселя для div или обходного пути относительного размера.

Особенно мне нравится знать:

  • Как можно учесть изменения ориентации экрана (альбомная / книжная)?
  • Как сделать мой макет "эластичным по высоте", то есть устойчивым к переключению адресной строки браузера?

Вот моя разметка: 

<body> 

<div data-role="page">

<div data-role="header">
    <h1>My Map</h1>
</div>

<div id="mapcontainer"  data-role="content">
     <!-- OpenLayers Map goes here -->          
</div>

</div>

</body>

Ответы [ 3 ]

0 голосов
/ 19 января 2011

Я еще не тестировал, но посмотрите, работает ли это:

установите полноэкранный режим, как описано здесь: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

и установите #mapcontainer width и height на 100%и поместите в него контент при тестировании)

0 голосов
/ 20 января 2011

OpenLayers прослушивает событие окна «изменить размер» и автоматически вызывает map.updateSize(). Здесь нечего делать.

В моем случае без заголовка работает следующий код: 

<div data-role="page" id="map">
     <div id="olmap"></div>
</div>

#olmap, #map {
    height: 100%;
    width: 100%;
}
0 голосов
/ 18 января 2011

Вы пробовали просто установить настройку ширины как для содержимого div, так и для содержимого div, которое, я думаю, в вашем случае было бы page?Мой опыт работы с мобильными браузерами заключается в том, что установка высоты и ширины вызовет проблемы при повороте телефона.Это ограничено iPhone, предоставлено.

...