页脚卡在页面中间

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% 之后渲染，即 window.

的边缘

我该如何解决这个问题？

Answer 1

对footer使用position:

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

还要确保为页脚的高度提供底部 padding 到 body，这样内容就不会重叠在页脚后面。

Answer 2

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

希望对您有所帮助:)

Answer 3

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

It's considered good practice to keep your css and your html separate. By adding in-line styles, it makes it more difficult to revise the look of a site, it makes it more difficult for future programmers to modify your site, and is overall NOT the best way to go. If everything is in a CSS file, then you can change the entire design of your site without having to mess with the data (HTML) of the site. So my advice do NOT use inline styles.

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

在您的 css 文件中，只需添加此 class

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

页脚卡在页面中间

Footer getting stuck on middle of the page

html

css

angularjs

node.js

ng-view