最终更新：

Question

嘿，我创建了Ember应用程序，并尝试设置Sticky Footer 我试着通过本教程Sticky Footer On CSS-Tricks来做这件事，因为它曾经为我工作过一次但是，随着Ember的努力，

我的css：

.mainFooter {
     height:100px;
     color:white;
     background-color: #0c2635;
     text-align:center;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
}
.wrapper:after {
    content: "";
    display: block;
}
.mainFooter, .wrapper:after {
    height: 100px;
}

我的HTML：

<footer class="mainFooter">
    SOME TEXT
</footer>

正如我所说的那样，它的工作量很大我通过Inspector观察源代码，我看到Ember为我放在application.hbs文件中的内容添加了自己的包装器，这个包装器有一个名为ember-view的类，所以我尝试做：

.ember-view {
    min-height: 100%;
}

但它也有效，页脚显示在页面中间有人可能试试这个并且成功吗？我想知道这个问题的解决方案。

我不知道如何在jsfiddle / codeopen中假冒Ember应用，所以我将应用上传到我的服务器，网址：http://drawyourgif.pe.hu/dist/

修改
根据{{1}}提取的解决方案，我这样做了：

Application.hbs：

kumkanillam

app.js

{{outlet "modal"}}
{{partial "header"}}
<div id="gif" class="wrapper">
    {{outlet}}
</div>
{{partial "footer"}}

我在控制台中收到此错误：

App = Ember.Application.extend({
    modulePrefix: config.modulePrefix,
    podModulePrefix: config.podModulePrefix,
    rootElement: '#gif',
    Resolver
});

我做错了什么？

Answer 1

默认情况下，

.ember-view将包含在所有ember组件中，因此对此类应用css属性并不好。

可能有很多方法，但下面应该有所帮助。

您可以将application.hbs包裹在page-wrap div内。

为此你需要在下面的行中加入的的index.html

<div id="app-name" class="wrapper"> {{content-for "body"}} </div>

<强> application.hbs

<h1> Content </h1> {{outlet}} <div id="footer"> <p>I'm the Sticky Footer. inside application.hbs</p> </div>

在rootElement中配置app.js。这将强制整个应用程序将其包含在app-name div。
中
app.js

App = Ember.Application.extend({ modulePrefix: config.modulePrefix, podModulePrefix: config.podModulePrefix, rootElement: '#app-name', Resolver });

<强> app.css

#wrapper { min-height: 100%; overflow: auto; } #footer { position: absolute; bottom: -3px; left: 2px; right: 2px; height: 50px; background-color: rgba(0, 0, 0, 0.8); color: #fff; }

最终更新：

您不需要在app.js中更改任何内容。只看样品旋转。我想这会对你有所帮助 SAMPLE TWIDDLE

Answer 2

这是一个使用flexbox的解决方案。您可能不想使用flexbox，因为您不熟悉它，但我会将此答案提交给以后的谷歌搜索。

这是一个主体内容非常少的代码集：http://codepen.io/anon/pen/KgXgjV

以下是主要区域中包含更多内容的相同CSS：http://codepen.io/anon/pen/dpVpBK

以下是var scoreData = [NSManagedObject]() { didSet { tableView.reloadData() } }无效的原因示例：https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C

HTML

position: absolute

CSS

<html>
<body>
  <div id="root" class="ember-application">
    <div id="ember332" class="ember-view">
      <div class='main-content'>
      <h1>Welcome to Ember Twiddle</h1>
        <br />

        <p>
          this page has very little content
        </p>
      </div>
      <div id="footer">
        <p>I'm the Sticky Footer. inside application.hbs</p>
      </div>
    </div>
  </div>
</body>
</html>

灰烬中的粘性页脚

2 个答案:

最终更新：

HTML

CSS