Проблема с ember-bootstrap: фон страницы отображается наполовину серым, обычно должен быть полностью белым

У меня есть небольшая проблема с Bootstrap. Иногда фон моей страницы наполовину белый / наполовину серый, но он должен быть полностью белым.

Как видите, в моем приложении есть какой-то серый фон, кто-то знает, как от него избавиться. Я знаком с CSS, поэтому, если вам нужна информация о моей проблеме, спросите меня! Спасибо!

РЕДАКТИРОВАТЬ Это код для моего тела:

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

Я использую упаковщик страниц по умолчанию для содержимого каждого элемента. Он не определен нигде.

РЕШЕНО: Благодаря @KieranMcClung это было решено. Вы можете видеть в комментарии, если хотите, но в основном я вставил в свою обёртку страницы что-то вроде:

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

1 ответ

Решение

Следующий пример обеспечит .page-wrapper класс всегда на высоте экрана 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). Вы должны учитывать это при тестировании на этих устройствах.

Другие вопросы по тегам