jQuery Mobileのコンテンツ領域全体をカバーするようにコンテンツdivのサイズを設定する方法

ヘッダーとコンテンツdivを持つシンプルなjQueryモバイルページを開始しました。コンテンツdivは、公開層のためのマップコンテナとして機能する必要があります。ヘッダーバーを除き、マップ全体が画面いっぱいになるはずです。jQuery Mobileのコンテンツ領域全体をカバーするようにコンテンツdivのサイズを設定する方法

幅と高さが100％のdivのサイズを変更しても機能しませんでした（何も表示されませんでした）ので、divまたは相対サイズの回避策のピクセルサイズへのCSSアプローチを探しています。

特に私が知りたい：

私は画面の向きの変更（ランドスケープ/ポートレイト）を占めることができますどのように？
レイアウトを「高弾力性」、つまりブラウザのアドレスバーの切り替えに耐えられるようにするにはどうすればよいですか？ここで

これまでのところ、私のマークアップです：

<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>

出典

2011-01-18 fbuchinger

OpenLayersは 'resize'ウィンドウのリスンを受け取り、自動的にmap.updateSize()を呼び出します。ここでは何もしません。私の場合は

、ヘッダなしで、次のコードは動作します：

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

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

出典

2011-01-20 09:54:32 tonio

ついにその加工さ – fbuchinger

は、あなただけのコンテンツのdiv要素の両方の幅設定を設定し、それは私があなたのケースでページだろうと思うのdivを含むだ試したことがありますか？モバイルブラウザでの私の経験では、高さと幅の両方を設定すると、電話が回転しているときに問題が発生することになります。これはiPhoneに限られている。

出典

2011-01-18 14:05:52 Slick23

私はまだそれをテストするが、これは動作するかどうかを確認しませんでした。ここで説明するよう

セットfulscreenモード：http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

と100％に#mapcontainer幅と高さを設定する（そして、いくつかのコンテンツを置きますテスト時）

出典

2011-01-19 08:11:48 naugtur

jQuery Mobileのコンテンツ領域全体をカバーするようにコンテンツdivのサイズを設定する方法

答えて

関連する問題