设置相对于其他元素的高度
我正在为一个jquerymobile网站做一个谷歌地图页面。我已经得到了我想要的地图，它显示得很漂亮，但是地图元素太大了-我不知道如何缩放它来填充页眉和页脚之间的所有可用空间。
所以我有：
header (假设它有30px高) footer (假设它有20px高)
由于现在有这么多不同尺寸的移动设备屏幕，我希望map_canvas是设备高度减去50px高。我可以在css中做这件事吗，或者我需要使用javascript吗？(我并不反对这一点，但如果使用纯css就更好了……)
回答 3
Stack Overflow用户
发布于 2011-10-18 04:49:35
由于一般视口的不稳定，自动高度是一个不可靠的问题，并且没有可靠地实现。
我以前需要在我的移动网站上实现类似的东西，我发现Quirksmode上的这篇文章非常有用-- http://www.quirksmode.org/mobile/viewports.html
在您的示例中，您可能希望高度为document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
或者，如果您想要硬编码，可以使用document.documentElement.offsetHeight - 50。当然，硬编码值是一种较难维护的方法。
Stack Overflow用户
发布于 2017-03-03 20:09:12
您可以在现代浏览器中使用height: calc(100% - 50px)。
Stack Overflow用户
发布于 2011-10-18 03:20:42
您可以使用javascript，也可以使用相对高度。例如，将标题的高度设置为10%，将页脚的高度设置为20%，然后您可以将地图的高度设置为70%。
https://stackoverflow.com/questions/7798440
复制相似问题
腾讯云开发者
