Question

我已经尝试了几种方法来解决这个问题，但我还没有成功。例如：Ember view height 即使我使用班级ember-application检查身体，或使用班级ember-view检查内部div，我仍然会看到固定高度低于100％。是什么导致了这个？

的index.html

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

模板/ application.hbs

<header>
...
</header>

<main>
{{outlet}}
<main>

<footer>
...
</footer>

风格/ 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>

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

1 个答案: