相對於其他元素設置高度

我正在爲jquerymobile網站的Google地圖頁面工作。我已經得到了地圖的行爲，並且它顯示得非常漂亮，但是地圖元素太大 - 我無法弄清楚如何縮放它以填充頁眉和頁腳之間的所有可用空間。相對於其他元素設置高度

所以我必須：

頭（讓我們說這是30像素高）頁腳（讓我們說這是20像素高）

既然有這麼多不同的屏幕尺寸爲移動設備，現在，我想map_canvas設備高度減去50px高。我可以在CSS中做到這一點，還是我需要使用JavaScript？（不反對，但使用純CSS會很好...）

由於一般的視口怪異，自動高度是一個光滑的問題，並不能可靠地實現。

我需要實現類似於之前在我的移動網站的東西，我發現這篇文章的怪異模式爲無限有用 - http://www.quirksmode.org/mobile/viewports.html

在你的情況，你想要的高度是 document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())

或者如果你想要硬編碼，document.documentElement.offsetHeight - 50。當然，對價值進行硬編碼是不太可維護的。

2011-10-17 20:49:35 DocileWalnut

我想我最終會使用jqm的「固定」工具欄來完全避開這一點，但我沒有想過關於偏移高度/ outerheight，謝謝！ –

你可以使用JavaScript，或者你可以使用相對高度。例如，將標題的高度設置爲10％，將頁腳設置爲20％，然後將地圖的高度設置爲70％。

2011-10-17 19:20:41 cocoahero

是的，頁眉和頁腳的尺寸由jqmobile設置，所以我不能使用它們的相對高度。 –

您可以在現代瀏覽器中使用height: calc(100% - 50px)。

2017-03-03 12:09:11

回答