CSS 使用固定的页脚和内嵌谷歌地图实现100%高度

在本文中，我们将介绍如何使用CSS来实现网页高度为100%的布局，并配备一个固定的页脚，并在页面中内嵌一个谷歌地图。我们将使用一些CSS技巧和示例代码来帮助我们实现这一效果。

阅读更多：CSS 教程

1. 设置页面高度为100%

要实现页面高度为100%，我们需要确保html和body元素都有100%的高度。这可以通过以下CSS代码实现：

html, body {
  height: 100%;
}

这将使整个页面的高度都设置为100%。

2. 创建固定页脚

接下来，我们将创建一个固定的页脚，使其始终位于页面的底部。我们可以使用position属性来实现这一效果。以下是示例代码：

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #f5f5f5;
  text-align: center;
  padding: 10px;
}

这段代码会将.footer类设置为固定的位置，位于页面的底部。通过设置左边和底部的属性为0，宽度设为100%，高度设为50px，我们可以确保页脚始终位于页面底部。

3. 嵌入谷歌地图

要在页面中嵌入谷歌地图，我们可以使用iframe标签。以下是一个示例代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3932.335963191764!2d-87.62437388515559!3d41.878113641682845!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fcbc6c7a3ec8d%3A0x6aeae5bb4d8a435d!2sWillis%20Tower%2C%20W%20Jackson%20Blvd%2C%20Chicago%2C%20IL%2C%20USA!5e0!3m2!1sen!2sin!4v1634423532879!5m2!1sen!2sin" 
        width="100%" 
        height="100%" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy">
</iframe>

在这个示例代码中，我们使用src属性指定谷歌地图的嵌入链接。通过设置width和height属性为100%，我们确保地图占据整个页面的空间。

4. 完整示例

下面是一个完整的示例，结合了页面高度为100%、固定页脚和嵌入谷歌地图的效果：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: #f5f5f5;
        text-align: center;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3932.335963191764!2d-87.62437388515559!3d41.878113641682845!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880fcbc6c7a3ec8d%3A0x6aeae5bb4d8a435d!2sWillis%20Tower%2C%20W%20Jackson%20Blvd%2C%20Chicago%2C%20IL%2C%20USA!5e0!3m2!1sen!2sin!4v1634423532879!5m2!1sen!2sin" 
            width="100%" 
            height="100%" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy">
    </iframe>

    <div class="footer">
      这是一个固定的页脚
    </div>
  </body>
</html>

使用这段代码，我们可以将页面高度设置为100%，同时在页面中嵌入一个谷歌地图，并拥有一个固定的页脚。