css - AngularJS 中的粘性 Bootstrap 页脚

Question

已解决。我使用这个解决方案:http://mystrd.at/modern-clean-css-sticky-footer/

===

我正在创建一个 social media share count app使用 AngularJS。在数据出现之前，用户需要输入一个 URL 并点击“Kira”按钮。

数据将与其他元素一起显示，例如屏幕截图和下方的一些文本。

我试图让我的页脚具有粘性，但它在移动 View 中不起作用。

桌面 View :

移动 View :

这是我的页 footer 分的 index.html:

<div class="footer">
        <div class="panel-footer text-center">
            <p class="tcenter"><small>Dibangunkan oleh <a href="http://facebook.com/handyplast" target="_blank">Zulhilmi Zainudin</a> // Teh tarik ditaja oleh <a href="http://www.binablogdotcomsendiri.com/blog/?utm_source=social-signal-checker&utm_medium=social-signal-checker-tool&utm_campaign=social-signal-checker" target="_blank">Bina Blog Dot Com Sendiri</a> &#128522;</small></p>
        </div>
    </div>

这是我的页 footer 分的 style.css 文件:

.footer {
    position: absolute;
    bottom: -100px;
    width: 100%;
    /* Set the fixed height of the footer here */

    height: 50px;
    background-color: #f5f5f5;
}

我的问题: 如何使页脚在两种 View (桌面和移动设备)中保持粘性？

Answer 1

应该做这样的事情

标记

<footer class="footer">
  <div class="container">
    <p class="text-muted">Place sticky footer content here.</p>
  </div>
</footer>

CSS

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}

如我的评论所述，您需要使用 Media-Query 更改较小屏幕上的样式。

@media screen and (max-width: 360px) {
.footer {
    //Mobile footer style here
}
}

阅读有关媒体查询的更多信息 here

Reference