Come dimensioni un div contenuti per coprire l'intera area contenuti in jQuery Mobile

StackOverflow https://stackoverflow.com/questions/4724221

Domanda

Ho iniziato un semplice jQuery Mobile pagina con un colpo di testa e un div contenuto. Il div contenuto dovrebbe servire come un contenitore di carta per OpenLayers. La mappa dovrebbe riempire l'intero schermo, fatta eccezione per la barra di intestazione.

Dimensionamento della div contenuti con una larghezza / altezza del 100% non ha funzionato (nulla è stato visualizzato), quindi sto cercando un approccio CSS per pixel-size il div o una soluzione relativa alle dimensioni originali.

In particolare mi piace sapere:

  • Come posso tener conto delle variazioni di orientamento dello schermo (orizzontale / verticale)?
  • Come posso fare il mio layout "altezza-elastico", cioè resistente alla commutazione della barra degli indirizzi del browser?

Ecco il mio markup finora: 

<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>
È stato utile?

Soluzione

OpenLayers ascolti per la finestra 'ridimensionamento' evento e automaticamente le chiamate map.updateSize(). Niente da fare qui.

Nel mio caso, senza intestazione, il seguente codice funziona: 

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

#olmap, #map {
    height: 100%;
    width: 100%;
}

Altri suggerimenti

Hai provato semplicemente impostando l'impostazione della larghezza sia per il div contenuti e sta contenenti div, che credo nel tuo caso sarebbe la pagina? La mia esperienza sui browser mobili è che l'impostazione di altezza e larghezza causerà problemi quando si ruota il telefono. Questo è limitato per l'iPhone, scontato.

ho ancora provarlo, ma vedere se questo funziona:

impostare la modalità fulscreen come descritto qui: http: // jquerymobile .com / demo / 1.0a2 / # docs / barre degli strumenti / bar-fullscreen.html

Kit di larghezza ed altezza #mapcontainer al 100% (e mettere alcuni contenuti in esso durante il test)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top