【问题标题】：Sticky footer in ember余烬中的粘性页脚
【发布时间】：2016-09-30 21:06:15
【问题描述】：

嘿，我创建了 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/

编辑
根据kumkanillam sugest 我这样做的解决方案：

Application.hbs：

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

app.js

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

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

ember.debug.js:43272Uncaught TypeError: Cannot read property 'tagName' of undefined

我做错了什么？

【问题讨论】：

可以发布一个codepen/jsbin吗？此外，使用 flexbox 可以干净/轻松地解决此问题。你愿意使用 flexbox 吗？
@sheepdog 嘿，我不在乎使用 flexbox，只是它的工作原理，看看我的编辑我添加了你可以看到问题的站点 url
@Harmanmet 我将 css 样式 position: fixed; bottom: -3px; left: 2px; right: 2px; 应用到 .wrapper:after 它在您的站点中有效。你可以试试这个

标签： css ember.js

【解决方案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>

在app.js 中配置rootElement。这将强制整个应用程序将其包含在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

【讨论】：

嘿@kumkanillam 我确实像你说的那样给我一个错误，请查看我的编辑以查看更多详细信息
@Harmanmet 而不是 application.hbs 在 index.html 中提及它
那么 link-to 助手呢，如果我将它们放在根元素之外，它们会在页脚中工作？
这行不通。纯 html 只有它才能工作。对于链接，您可以使用普通的锚标记。 ..如果这不符合您的要求，那么我们应该尝试找出在 application.hbs 中包含页脚内容..
@Harmanmet 我用twiddle 更新了我的答案。您不能在 application.hbs 中关闭 application.hbs 包装器 div 并打开页脚类。遵循不同的技巧来添加粘性页脚。我希望这对你有帮助。祝你好运。

【解决方案2】：

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

这是一个主体内容很少的codepen：http://codepen.io/anon/pen/KgXgjV

这是相同的 css，主要区域中的内容更多：http://codepen.io/anon/pen/dpVpBK

以下是position: absolute 不起作用的示例：https://ember-twiddle.com/f620502b8172f4181c9d58503e02e39c?openFiles=templates.application.hbs%2C

HTML

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

CSS

/* this is just to reset codepen */
/* probably not necessary on ember */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* end reset */


html, body, #root {
  height: 100%;
}

.ember-view {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: lightblue;
}

.main-content {
  flex: 1;
}

#footer {
  width: 100%;
  height: 50px;
  background-color: grey;
}

【讨论】：