установить height to auto и min-height до 100%. Это должно решить ее для большинства браузеров.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

обычно эта проблема возникает, когда дочерние элементы родительского Div плавают. Вот это Последний Решением проблемы:

в вашем CSS файле напишите следующий класс под названием .clearfix вместе с псевдо селектор :после

.clearfix:after {
content: "";
display: table;
clear: both;
}

затем, в вашем HTML, добавьте .класс clearfix для вашего родительского Div. Например:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Он должен работать всегда. Вы можете назвать имя класса как .группа вместо .clearfix, так как это сделает код более семантическим. Обратите внимание, что нет необходимости добавлять точку или даже пробел в значение содержимого между двойными кавычками "". Кроме того,переполнение: авто; может решить проблему, но это вызывает другие проблемы, такие как показ полосы прокрутки и не рекомендуется.

Источник: Блог Лизы Каталано и Криса Койера

если вы просто оставить height: 100% и использовать display:block; the div займет столько же места, сколько содержимое внутри div. Таким образом, весь текст будет оставаться на черном фоне.

попробуйте это:

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

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

IE6 и более ранние версии не поддерживают свойство min-height.

Я думаю, что проблема в том, что когда вы говорите телу иметь высоту 100%, его фон может быть только таким же высоким, как высота одного браузера "viewport" (область просмотра, которая исключает панели инструментов браузеров & statusbars & menubars и края окна). Если содержимое выше, чем один видовой экран, он будет переполнять высоту, выделенную для фон.

это свойство min-height на теле должно заставить фон быть по крайней мере таким же высоким, как один видовой экран, если ваше содержимое не заполняет одну целую страницу вниз, тем не менее, он также должен позволить ему расти вниз, чтобы охватить больше внутреннего содержания.

старый вопрос, но в моем случае я нашел с помощью position:fixed решил это за меня. Хотя моя ситуация могла бы быть немного другой. У меня был наложенный полупрозрачный div С загрузкой анимации в нем, что мне нужно было отображается во время загрузки страницы. Так что с помощью height:auto / 100% или min-height: 100% оба заполнили окно, но не закадровую область. Используя position:fixed сделал этот оверлей прокруткой с пользователем, поэтому он всегда покрывал видимую область и сохранял мою анимацию предварительной загрузки в центре экран.

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

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

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

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

даже вы можете сделать так

display:block;
overflow:auto;
height: 100%;

Это будет включать в себя каждый динамический div в соответствии с содержанием. Предположим, что если у вас есть общий div с классом, он увеличит высоту каждого динамического div в соответствии с содержимым

ок я пробовал что-то вроде этого

тело (нормальное)

MainDiv (где все содержимое идет): Display:table; overflow-y: auto

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

этот вопрос может быть старый, но он заслуживает обновления. Вот еще один способ сделать это:

#yourdiv {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
width:100%;
height:100%;
}

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

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

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

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

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