设置相对于其他元素的高度

Question

我正在为jquerymobile网站的Google地图页面工作。我的地图表现得像我想的那样，它显示得很漂亮，但是地图元素太大了 - 我无法弄清楚如何缩放它以填充页眉和页脚之间的所有可用空间。

所以我有：

标题（让我们说它高30px） 页脚（让我们说这是20px高）

由于现在移动设备的屏幕尺寸太多了，我希望map_canvas的设备高度减去50px高。我可以在css中执行此操作，还是需要使用javascript？ （不反对，但使用纯css会很棒......）

Answer 1

您可以在现代浏览器中使用height: calc(100% - 50px)。

Answer 2

您可以使用javascript，也可以使用相对高度。例如，将标题的高度设置为10％，将页脚设置为20％，然后将地图的高度设置为70％。

Answer 3

由于一般视口不稳定，自动高度是一个很滑的问题，并没有可靠地实施。

我之前需要在我的移动网站上实现类似的功能，我发现Quirksmode上的这篇文章无限有用 - http://www.quirksmode.org/mobile/viewports.html

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

或者如果你想硬编码，document.documentElement.offsetHeight - 50。当然，对价值进行硬编码是一种不易维护的方法。