Question

我有页脚，但对Google地图有疑问。

 <table class="sortable table table-bordered table-responsive " id="table"  ng-show="bsalInfo">
    <tbody>
        <tr ng-repeat="att in bsalInfo track by $index">
               <td>{{att.name}}</td>
        </tr>
    </tbody>
</table>

开始使用此脚本编写我的Google地图

<div class="col-md-12" >
    <div id="map" style="width:100%;  height: 60%; position: absolute;margin-top: 45px;">
        <div id="map"></div>
    </div>
</div>

完成此脚本我的Google地图

此CSS页脚

footer{
    position: relative;
    bottom: 0 ;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

}

我的问题在哪里？ 1.我的页脚在地图上，我希望页脚始终在页面上。 2当页脚页面上的滚动条始终坐下时，无论页面上有多少结果。

Answer 1

我希望页脚位于页面底部，而不是固定。

HTML

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>

CSS

html {
      height: 100%;
    }

body {
  position: relative;
  margin: 0;
  min-height: 100%;  
  padding: 0;
}

#header {
  background: green;
  height: 90px;
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: red;
}

Answer 2

似乎您的代码中没有显示任何元素<footer>。但是，如果您希望页脚始终停留在页面底部，请使用position: fixed;和bottom: 0;以及其他样式

详细了解here

始终定位下页脚

2 个答案: