html - 内容未将页脚向下推

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

引导面板页脚

.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