他の要素との相対的な高さを設定する

Question

jquerymobileサイトのGoogleマップページで作業しています。地図の要素が大きすぎます。ヘッダーとフッターの間にあるすべての空き領域を埋めるために、どのようにスケーリングするのか分かりません。

だから私は持っている：

ヘッダ（のは、それが30px高さだとしましょう） フッター（のそれは20ピクセルの高だとしましょう）

をモバイルデバイス用の非常に多くの異なる画面サイズが今があるので、私が欲しいですデバイス高さから高さ50pxを引いた値にmap_canvasを設定します。私はCSSでこれを行うことができますか、またはJavaScriptを使用する必要がありますか？ （それには反論ではありませんが、純粋なCSSを使うことは素晴らしいです...）

Answer 1

一般的なビューポートウインキーのために、自動高さは滑りやすい問題であり、確実に実装されていません。

私のモバイルサイト上で前に似た何かを実装するために必要な、と私は無限に有用であることがQuirksmodeに、この記事を見つけた私は

- あなたの場合http://www.quirksmode.org/mobile/viewports.html

、あなたは高さが document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())

になりたいと思います

またはハードコードする場合は、document.documentElement.offsetHeight - 50。もちろん、値をハードコーディングすることは、保守性の低い方法です。

Answer 2

あなたはjavascriptを使うことができますし、相対的な高さを使うこともできます。たとえば、ヘッダーの高さを10％、フッターを20％に設定し、マップの高さを70％に設定できます。

Answer 3

最新のブラウザではheight: calc(100% - 50px)を使用できます。