Высота Div 100% и расширяется, чтобы соответствовать содержанию

Question

У меня есть элемент div на моей странице, его высота установлена ​​на 100%.Высота тела также установлена ​​на 100%.Внутренний div имеет фон и все это и отличается от фона тела.Это работает для того, чтобы высота div составляла 100% от высоты экрана браузера, но проблема в том, что у меня есть контент внутри этого div, который выходит вертикально за высоту экрана браузера.Когда я прокручиваю вниз, div заканчивается в том месте, с которого нужно было начать прокручивать страницу, но содержимое выходит за рамки этого.Как сделать так, чтобы div всегда шел до самого дна, чтобы соответствовать внутреннему содержимому?

Вот упрощение моего CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

После прокрутки страницы появляется чернотазаканчивается, и содержимое перетекает на красный фон.Кажется, не имеет значения, установил ли я положение относительно или абсолютно на #some_div, проблема возникает в любом случае.Содержимое внутри #some_div в основном абсолютно позиционировано и динамически генерируется из базы данных, поэтому его высота не может быть заранее известна.

Редактировать: Вот скриншот проблемы:

Answer 1

Современные браузеры поддерживают модуль «Высота области просмотра». Это расширит div до доступной высоты области просмотра. Я считаю это более надежным, чем любой другой подход.

#some_div {
    height: 100vh;
    background: black;
}

Answer 2

Я посмотрел на несколько ответов и объединил их.Вот он:

#some-div {
    overflow:scroll;
    display:block;
    min-height:100%;
}

Этот ответ работает лучше всего, так как поддерживаемый в настоящее время ответ включает автоматическую опцию переполнения (которая отличается от прокрутки в некоторых браузерах).Это также позволяет вам установить минимальную высоту в отличие от принятого ответа, когда вы не можете коснуться высоты.

Answer 3

Я не совсем уверен, что понял вопрос, потому что это довольно простой ответ, но здесь идет ...:)

Вы пытались установить свойство переполнения контейнер до видимого или авто?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Добавление, которое должно подтолкнуть черный контейнер к размеру, который требуется вашему динамическому контейнеру.Я предпочитаю видимость авто, потому что авто, кажется, идет с полосами прокрутки ...