html - 始终放置底部页脚

标签 html css

我有页脚,但谷歌地图有问题。

 <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>

启动这个脚本我的谷歌地图

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

完成这个脚本我的谷歌地图

这个 css 页脚

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

}

我的问题在哪里? 1. 我的页脚在 map 上,我希望页脚始终在页面上。 2 当页脚页面上有滚动条时,无论页面上有多少结果,它总是坐下。

最佳答案

我希望您的页脚位于页面底部,但不是固定

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;
}

关于html - 始终放置底部页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53701701/

相关文章:

css - 这个 CSS 的哪一部分使这个三 Angular 形变钝了?

php - 进入时打开的 HTML 5 灯箱

javascript - 如果我将固定宽度更改为 'auto' 动画会失真

jquery - 是否可以从显示 :block to display: inline-block when toggleing? 更改 jQuery 默认值

html - 无法将圆形按钮中的文本垂直居中

html - 如何平滑 SVG 路径的边缘

jquery - 向多个元素添加类

html - 避免在 CSS border-radius 中使用椭圆形

javascript - 设置列表元素宽度文本宽度

php - 如何停止我的 jquery 来监听所有行的数据?