Question

我有一个页眉和页脚，每个都有动态内容。这实际上是一个带有母版页的aspx页面，其中包含页眉/页脚内容，其大小可能不同。我无法强制页眉或页脚的px高度，因为它们可能有图像或文本等。我想让Google地图填充它们之间的可用页面高度（和宽度）。我将给地图画布一个最小高度200px，以防万一，但否则它应该强制页脚到页面底部而不滚动（除非屏幕足够短，最小200px需要滚动）。

<body>
<div id="wrapper">
    <div id="header">Title<br />of<br />variable<br/>height</div>
    <div id="body">
        <div id="map-canvas"></div>
    </div>
    <div id="footer">
        Footer<br />of<br />variable<br />height
    </div>
</div>

这是一个小提琴，使用弹性方法非常接近......它似乎适用于Chrome / FireFox，但这在IE11中不起作用。 https://jsfiddle.net/randbrown/7dc8u6ja/4/

基于弹性的方法是否最适合这个，如果是这样，我错过了什么让它在IE中工作？或者有更好的方法来实现这一目标吗？

Answer 1

我终于在IE11中工作了。它需要高度：#wrapper div上的100％。现在它适用于Chrome / Firefox / IE11 / Edge。

[6, 12]

更新了小提琴 https://jsfiddle.net/7dc8u6ja/5/

如何使Google地图填充动态页眉和页脚之间的可用高度

1 个答案: