ember-bootstrap 问题：页面背景呈半灰色，通常应为全白

Question

Bootstrap 我有一个小问题。有时候，我的页面背景是半白/半灰，但应该是全白的。

如您所见，我的应用程序中有一些灰色背景，一些body 知道如何摆脱它。我知道 CSS，所以如果您需要有关我的问题的任何信息，请问我！谢谢！

编辑这是我的 body 的代码：

body {
    background-color: #eee;
    padding-bottom: 35px;
}

我为每个元素的内容使用默认值 page-wrapper。他在任何地方都没有定义。

已解决：感谢@KieranMcClung，它已解决。如果你愿意，你可以在评论中看到，但基本上，我输入了我的 page-wrapper 类似的东西：

<div id="page-wrapper" style="height: auto; min-height: 100vh">

Answer 1

以下示例将确保 .page-wrapper class 始终处于 100% 屏幕高度。

HTML

<body>
    <div class="page-wrapper">
        <!-- Page content -->
    </div>
</body>

CSS

body {
    background-color: #eee;
}

.page-wrapper {
    background-color: #fff;
    min-height: 100vh; /* Important bit */
}

值得注意的是，vh 在某些移动浏览器上可能会产生不同的结果，因为顶部浏览器栏在滚动时会消失，这意味着屏幕高度（vh 值）会发生变化。在这些设备上进行测试时，您必须牢记这一点。

Issue with ember-bootstrap: page background rendered half gray, should normally be totally white