通过 Google Maps API 获得的地图隐藏了我的页脚答案

【问题标题】：My footer is hidden by the map obtained via the Google Maps API通过 Google Maps API 获得的地图隐藏了我的页脚
【发布时间】：2012-09-15 15:09:56
【问题描述】：

我在我的网站上使用 Google Maps API，当我尝试减小窗口的宽度时，页脚被地图隐藏了。我的目标是在地图和页脚之间添加一个空白区域。

大窗口中的结果：

小窗口中的结果：

页面的html代码：

<section class="contact">
    <article class="contact">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet</p>
        <div class="carte">
            <div id="map_canvas" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
                <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
                </div>
            </div>
            <p></p>
    </article>
</section>
<footer>
    <p class="align-droite">
        <span>Lorem ipsum</span>
        Dolor sit amet
    </p>
</footer>

</body>
</html>

页面的css代码：

footer{
        width:100%;
        font-family:'karla';
        text-align:right;
        margin-top:1%;
}
.carte{
        height:95%;
        margin-bottom:3%;
}

我尝试添加边距属性，但没有任何效果。有解决办法吗？

【问题讨论】：

您忘记验证您的 HTML。在我在上面缩进你的代码之后，你可以看到你的 <div class="carte"> 上缺少一个结束标签。

标签： css html google-maps-api-3

【解决方案1】：

有关页眉、页脚和正文的 css 框架，请参见 jsfiddle。 CSS已被评论以提供帮助。 Jsfiddle 允许您更改 css 值并使用运行按钮查看更改。

【讨论】：