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>

我希望它有所帮助：）

页脚卡在页面中间

3 个答案: