Ember 全高 div答案

【问题标题】：Ember full height divEmber 全高 div
【发布时间】：2015-01-24 12:14:48
【问题描述】：

我尝试了几种方法来解决这个问题，但我没有成功。例如：Ember view height 即使我用ember-application 类检查body，或者用ember-view 类检查内部div，我仍然看到低于100% 的固定高度。那么是什么原因造成的呢？

index.html

...
<body>
... some script declarations....
</body>
...

templates/application.hbs

<header>
...
</header>

<main>
{{outlet}}
<main>

<footer>
...
</footer>

styles/app.css

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

通过 Chrome 开发工具检查生成的 HTML

<html data-ember-extension="1">
    <body class="ember-application">

    ... scripts from body

    <div class="hiddendiv common"></div>

    <div id="ember286" class="ember-view">

    <header>
    </header>

    <main>
      <div class="container">
      </div>
    </main>

    <footer>
    </footer>

    </div>
    </body>
</html>

【问题讨论】：

标签： css ember.js

【解决方案1】：

为什么不使用 flexbox？

.ember-application {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

LE：足够接近。实际解决方案：

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

main
{
  flex: 1 0 auto;
}

【讨论】：

我已经在使用 Materialize 库，它根据我的理解使用了 flex 本身。无论如何，尝试了你的代码，没有改变任何东西。
搞定了。不过谢谢你的想法。为您的答案添加了解决方案。