Ember 全高 div

Question

为了解决这个问题，我尝试了多种方法，但都没有成功。例如：Ember view height 即使我用 class ember-application 检查主体，或者用 class 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%;
}

结果 HTML 通过 Chrome 开发工具检查

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

Answer 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;
}

Ember 全高 div

Ember full height div

css

ember.js