AngularJS中的Sticky Bootstrap页脚

Question

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

===

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

数据会与其他项目一起显示，例如屏幕截图和下面的一些文字。

我尝试让我的页脚粘，但它不能在移动视图中工作。

桌面视图：

移动视图：

这是我的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>

这是我的页脚部分的style.css文件：

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

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

我的问题： 如何在两个视图（桌面和移动设备）中粘贴页脚？

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

详细了解Media-Queries here

Reference