Question

我有一个粘在底部的页脚（它留在底部有长页和短页。）这是css for it

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


}

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

我在我的application.html.erb文件中使用rails并使用此代码渲染页脚

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

Answer 1

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

e.g。

position: absolute

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

Answer 2

只需使用position: fixed并且z-index低于主要内容的页脚。确保您的主要内容具有与页脚高度相同的边距底值，以便查看它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

有时当你想看看如何使用特定网页的css样式你只需使用网页浏览器开发工具（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样式，问候。

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

3 个答案: