页脚卡在页面中间

Question

我正在开发一个 angularjs + node js 应用程序。我在index.html 中调用我的观点如下：

<div ng-include="'views/header/header.view.html'"></div>
<div ng-view style="height: 100%"></div>
<div ng-include="'views/footer/footer.view.html'"></div>

我添加了style="height: 100%"，因为没有添加它，我的 ng-view 没有扩展到全屏。 但现在我的页脚与我的页面相交。这可能是因为在 height: 100% 之后渲染，即窗口边缘。

我该如何解决这个问题？

Answer 1

将position 用于footer：

<div ng-include="'views/footer/footer.view.html'"
     style="position: fixed; bottom: 0; left: 0; right: 0;"></div>

还要确保将底部padding 指定给body 作为页脚高度，这样内容就不会在页脚后面重叠。

Answer 2

来自https://teamtreehouse.com/community/when-is-inline-css-a-good-idea：

将 css 和 html 分开是一种很好的做法。通过添加内嵌样式，修改网站的外观变得更加困难，使未来的程序员更难以修改您的网站，并且总体上不是最好的方法。如果所有内容都在 CSS 文件中，那么您可以更改网站的整个设计，而不必弄乱网站的数据 (HTML)。所以我的建议是不要使用内联样式。

<div class='sticky-footer' ng-include="'views/footer/footer.view.html'"></div>

在你的css文件中，添加这个类

    .sticky-footer {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        right: 0;
        height: whatever you want px;
     }

Answer 3

<div ng-include='"templates/header.html"'></div>
    <div ng-view></div>
    <div ng-include='"templates/footer.html"' class="footer--section"></div>

.footer--section {
    margin: 0 ;
    width: 100%;
}
.footer address {
    float: right;
    font-size: 13px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    line-height: 18px;
    margin: 0;
    padding: 0;
}

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-offset-6">
                <address>
                    your addresss... or footer
                </address>
            </div>
        </div>
    </div>
</div>

希望对你有帮助:)