如何用另一个元素覆盖粘性页脚？答案

【问题标题】：How to cover a sticky footer with another element?如何用另一个元素覆盖粘性页脚？
【发布时间】：2016-05-23 19:15:14
【问题描述】：

我有一个粘在底部的页脚（它与长页和短页保持在底部。）这是它的 css

.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: white;


}

我想创建一个类似于本网站... dartlang.org 的“展示”或窗帘效果。（显然滚动到底部）。我试过用固定的页脚来做这个，但我似乎无法让它工作。

我正在使用 rails 并在我的 application.html.erb 文件中使用此代码呈现页脚

<%= render 'shared/footer' unless @disable_footer %>

由于某种原因，jquery 显示页脚也不想使用此设置

编辑：这是我页脚的代码...有点草率，抱歉。

<footer class="footer" id="#myfooter">
  <body>
  <div style="background-color: white;">
  <hr style="width: 100%;">

  <div class="container">

    <div class="row">
      <div class="container-fluid">
        <div class="col-md-6">
          <h4>Consulting and Development</h4>
          <ul style="font-weight: bold;">


          <li><%= link_to "Training and Coaching", training_coaching_path%></li>
         <li> <%= link_to "Business Development", business_development_path%></li>
         <li> <%= link_to "Automotive Consulting", automotive_consulting_path%></li>
         <li> <%= link_to "Environmental Consulting", environmental_safety_path%></li>

          </ul>
        </div>

        <div class="col-md-6">
          <h4>Quality Product Assurance</h4>
          <ul style="font-weight: bold;">
            <li><%= link_to "Product Inspection and Quality Resolution", containment_and_quality_path%></li>
            <li><%= link_to "Auditing", auditing_path%></li>
          </ul>
        </div>

      </div>
    </div>


    <hr>

    <div class="row">
      <div class="col-md-4">
        <h4 style="text-decoration: underline;">Corporate Office Location:</h4>
        <p>1</p>
        <p></p>
      </div>

      <div class="col-md-4">
        <h4 style="text-decoration: underline;">Mailing Address:</h4>
        <p></p>
        <p></p>
      </div>


      <div class="col-md-4" style="text-align: center">
        <p>
         <a href="mailto:hr"><i class="fa fa-envelope-o fa-2x" aria-hidden="false"></i></a>
          <a href="https://www.linkedin.com/company/"><i class="fa fa-linkedin fa-2x" aria-hidden="false"></i></a>
          <a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x" aria-hidden="false"></i></a>
        </p>
      </div>

    </div>

    <div class="row">
      <div class="col-md-12">
        <p class="text-muted" style="text-align: center;"> - Copyright 2016 - All Rights Reserved</p>
        <p class="text-muted" style="text-align: center;"> Homepage background image was <a href="http://www.freepik.com/free-vector/gear-icons-collection_792514.htm">Designed by Freepik</a></p>
      </div>



    </div>


  </div>
  </div>
  </body>
</footer>

【问题讨论】：

标签： jquery html css ruby-on-rails

【解决方案1】：

只需使用position: fixed 和低于主要内容z-index 的页脚。确保您的 main-content 具有与页脚高度相同的 margin-bottom 值才能看到它。

    html,
    body {
      margin: 0;
      padding: 0;
    }
    .main-content {
      background-color: #333333;
      width: 100%;
      height: 800px;
      margin-bottom: 300px;
    }
    .footer {
      background-color: #0072C6;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 300px;
      z-index: -1;
    }
    .footer p {
      color: #000000;
    }

<div class="main-content">
</div>
<div class="footer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero.</p>
</div>

【讨论】：

啊，谢谢。我错过了主要内容的边距

【解决方案2】：

您可以通过在主页内容元素上设置position: relative 和z-index 来实现此目的，然后在页脚组件上设置较低的z-index（应设置为position: fixed 而不是position: absolute )。

例如

.container {
  position: relative;
  background: #fff;
  z-index: 2;
  margin-bottom: 100px; /* Must be equal to footer height */
}
.footer {
  position: fixed;
  bottom: 0;
  background: red;
  z-index: 1;
  width: 100%;
  height: 100px;
}

我在这里敲了一个简单的演示：http://codepen.io/anon/pen/reXdby。

【讨论】：

我试过这个，但由于某种原因，它会切断大部分页脚......我会用页脚代码更新我的问题
为您的主要内容设置与页脚高度相等的下边距。我已经更新了我的答案和“笔”。

【解决方案3】：

有时，当您想查看特定 Web 的 css 样式如何工作时，您只需使用 Web 浏览器开发工具 (F12) 选择按钮以在页面上选择一个 Dom 元素并跟踪 css 样式，例如属于您的示例页面有一个具有下一个类的 div：

.footer {
background:#3f4245 url(../imgs/footer-bg.png) repeat-x left top;
padding-top:60px;
padding-bottom:80px;
position:fixed;
bottom:0;
left:0;
z-index:100;
height:300px;
-webkit-transform:translateZ(0)}

也许这有助于您在未来跟踪其他 css 样式，问候。

【讨论】：