html - 固定页脚无法正常工作

Question

我正在为我的应用程序使用 jQuery Mobile 1.1.1。 我的 index.html 看起来像:

<div data-role="page" id="home" data-theme="a">
   <div data-role="content">
      <div class="container">
        <div class="row" align="center">                            
        </div>
      </div>
  </div>
  <div class="footer_fixed">   
    <div ><a href="#surveyConductedList"  class="ui-link" > List </a></div>
    <div ><a href="#uploadData"  class="ui-link" > Upload </a></div>
  </div>
</div>

还有页脚的 CSS:

.footer_fixed {
  left: 0;
  right: 0;
  width: 100%;
  position: fixed;
  z-index: 1000;
  bottom:0;
}

但是我的页脚没有显示在屏幕上。它最后显示在屏幕的末尾。我想把它贴在屏幕上并在向下滚动时向下移动

Answer 1

你应该用 attribute selector .

[data-role="footer"] {
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
}

或者向您的页脚 添加一个类，因为您没有任何引用.ui-footer-fixed 的类。

编辑:如果你想将页脚设置到底部(通常是footer)，你必须设置bottom: 0; 正如 @thepio 指出的那样。我之前没有添加它，因为我想维护你的 CSS 代码，但我在这里添加以避免疑虑。