Question

我的页脚没有被内容压低。我尝试过z-index，粘性页脚，没有人纠正过这个问题。

http://www.subsbench.pamelajkeogh.com/player.html

CSS

#footer {
    position: absolute;
    clear: both;
    bottom:0;
    width:100%;
    height:105px;   /* Height of the footer */
    background:#eaebec;
    background: linear-gradient(180deg, #eaebec, #7c7d7f);
/*  position: relative;*/
    z-index: 9999;
}

HTML

      <!-- Footer -->       
        <div id="footer" class="panel-footer col-xs-12">
          <div class="col-md-4"></div>
          <div class="col-md-4">
          <img id="subsBench-footer-img" src="images/Footer_Black_onTheBench_strapline_and_logo.png" alt="SubsBench Logo and Strapline">
          </div>
          <div class="col-md-4">
          <img id="sm-icons" src="images/social_media_Icons.png" alt="Social Media icons">
          </div>
        </div><!-- /Footer -->

</div><!-- /container -->

bootstrap panel-footer

.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

Answer 1

您在页脚上使用position: absolute;，这可能就是为什么它没有被“内容推送”。您是否尝试过使用position: relative;（看起来您已将其评论出来）？

<强>资源：

Absolute Positioning Inside Relative Positioning

内容没有在页面上推下页脚

1 个答案: