内容未在页面上向下推页脚答案

【问题标题】：Content not pushing footer down on page内容未在页面上向下推页脚
【发布时间】：2015-03-23 15:23:35
【问题描述】：

嗨，我的页脚没有被内容压低。我尝试过 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;
}

【问题讨论】：

你的页脚在哪里？你能告诉我们更多细节吗？

标签： html css twitter-bootstrap-3

【解决方案1】：

您在页脚上使用了position: absolute;，这可能就是它没有“被内容下推”的原因。您是否尝试过使用position: relative;（看起来您已将其注释掉）？

资源：

Absolute Positioning Inside Relative Positioning

【讨论】：