页面未填充内容时粘性页脚

Question

所以我猜这里已经有很多话题了，如果这是一个重复，我会道歉。我当时找不到它。

我正忙于基于Ionic框架进行测试的角度应用程序。现在我想要完成的是一个始终坚持页面底部的页脚。由于某种原因，它没有。

这就是发生的事情（橙色栏应该作为页脚。）：

我试图实现的是一种非常类似于Ryanfait的粘性脚的解决方案。

我的CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -150px; 
}
.page-wrap:after {
  content: "";
  display: block;
  height: 150px;
}

#mainView #footer {
    height: 150px;
    background: orange;
} 

然后我的HTML：

<div class="page-wrap">
        <div id="logo-ionic">
            <img src="img/ionic.png" />
        </div>
    </div>

    <div id="footer">
        <!-- Footer content blablabla -->
    </div>

我承认我不想使用javascript解决方案。

谢谢（：

Answer 1

考虑到您Ionic需要为什么不使用<ion-footer-bar></ion-footer-bar>指令。

Here看看这个......

Answer 2

针对此问题的大多数CSS解决方案旨在实现一些目标：

它们应该有一个带有固定宽度侧杆的流体中心。 中心列（主要内容）应首先出现在HTML源代码中。 无论哪个列实际上是最高的列，所有列都应该是相同的高度。 它们应该需要最少的标记。 当内容稀疏时，页脚应“粘贴”到页面底部。

请参阅https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/

<强>第二 解决方案列表

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
http://www.cssplay.co.uk/layouts/fixit.html
http://jsfiddle.net/jgmoy4a3/
http://codepen.io/VinSpee/pen/zxBJVO