Растянуть содержимое div для заполнения экрана, когда содержимое меньше всей страницы |Enjin

Question

Я работаю на сайте enjin для друга и не могу понять, как заставить страницу растягиваться, чтобы заполнить весь экран по вертикали , если содержаниене хватает этого, чтобы сделать это самостоятельно.Я пробовал скрипты и CSS из дюжины или более решений и не могу понять, как заставить его делать это, потому что это не мой код, а его Enjin, и мне приходится обходить его.

Есть 2 страницы вВопрос: одна страница стандартного формата, поэтому все, что с ней сделано, можно сделать со всеми страницами, кроме пользовательской, и проблем не возникнет, а другая - это страница с пользовательским кодированием, использующая их модуль HTML.Ключ одинаковое решение необходимо для обоих, но они имеют разный код.

Пользовательская страница: X |Стандартная страница: X

Проще говоря, я прошу решение здесь.Я попробовал гибкое решение, высоту 100% с отображением блока, javascript, чтобы найти расстояние между нижней частью нижнего блока и нижней частью монитора и соответственно отрегулировать высоту, и многое другое.Ничто не похоже на работу.Очень благодарен за любую помощь.

Я могу предоставить любую дополнительную информацию, просто спросите.

Answer 1

position: absolute;
height: 100%;

Могут быть и другие проблемы с этим, поскольку я понятия не имею, как мобильные или адаптивные материалы будут работать именно для вашего сайта, но это один из способов.Вы соединяете div BG с div содержимого - вот почему вы наблюдаете такое поведение - вам нужно сделать BG родственным div содержимого вместо родительских дочерних отношений, тогда вы сможете иметь больше гибкости в том, как это работает - но длятеперь мой вариант, кажется, работает

Answer 2

То, что вы пытаетесь достичь, это 2 вещи.Во-первых, вы хотите, чтобы div #memberContainer всегда был по крайней мере таким же высоким, как экран пользователя, минус высота вашего нижнего колонтитула.

Это может быть выполнено с помощью css с использованием модуля " vh ".Единица измерения vh определяется следующим образом:

Относительно 1% высоты области просмотра *

И функция calc , как вынужно будет вычесть 100vh (высоту экрана) из высоты нижнего колонтитула (180px).

Поэтому вам нужно добавить этот код в ваш # memberContainer.

#memberContainer{min-height: calc(100vh - 180px)}

Второевам нужно убедиться, что фоновое изображение #memberBlock всегда покрывает всю видимую часть экрана.

Само изображение имеет размер 1920 * 1080, что является стандартным разрешением 16: 9.Предполагая, что вы хотите использовать только экраны 16: 9, это будет работать нормально.Однако для покрытия мобильных телефонов и всех других экранов я бы порекомендовал вам использовать:

#memberBlock{background-size:cover}

Это гарантирует, что изображение всегда будет покрывать экран.

Answer 3

У вас не может быть пробела и контента для его заполнения.Где-то должен быть пробел. Ваш пробел появляется посередине, потому что нижний колонтитул абсолютно позиционирован.Если вы прекратите размещать нижний колонтитул абсолютно, нижний колонтитул будет цепляться за обертывание, однако у вас все равно будет пробел внизу, он будет выглядеть не так плохо.

.myfooter {
    display: none;
    width: 100%;
    position: relative;
    background-color: RGB(20, 20, 20);
    height: 180px;
    bottom: 0;
}

Если вы действительно хотите, чтобы он соответствовал экрану, вы можете задать минимальную высоту с показателем 100vh-FooterHeight