Question

我在所有子页面中都有相同的代码。在这个特别的一个，我有一张地图。页脚位于除此之外的所有页面的底部。我注意到我在浏览器中缩小，它将会显示在底部。否则，它位于地图上。我已经在这里测试了答案How do you get the footer to stay at the bottom of a Web page?，但它只是改变了页脚的位置，它仍然在地图的中间。

    <style>

    .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 60px;
        }   
                #map {

             height: 250px;
             width: 30%;

            }
         </style>

</head>
<body>

        <nav class="topnav">
                <a  href="index.html">Home</a>
                <a  href="resume.html">Resume</a>
                <a   href="awards.html">Awards</a>
                <a   href="teaching.html">Teaching</a>
                <a  class="active" href="contact.html">Contact</a>
        </nav>



           <br>
            <h3>Address</h3>
    <p>1750 cyg Hwy </p>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat:33333, lng: -33333};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key= AIzaSyALqA8E2Iu2s_fRkVcsUG__-3333fQEOCE &callback=initMap">
    </script>
<footer class="footer">
              ©copyright    </footer>


</body>

</html>

在内容结尾处粘贴页脚

0 个答案: