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

У меня есть элемент 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 в основном абсолютно позиционировано и динамически генерируется из базы данных, поэтому его высота не может быть заранее известна.

Изменить: Вот скриншот проблемы:

Вот что вы должны сделать в стиле CSS, на главной div

display: block;
overflow: auto;

И не трогай height

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

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

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

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

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

Затем в своем HTML добавьте класс .clearfix к родительскому элементу Div. Например:

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

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

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

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

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

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

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

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

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

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

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

Это свойство минимальной высоты в теле должно ФОРМИРОВАТЬ фон, чтобы он был по крайней мере таким же высоким, как один видовой экран, если ваш контент не заполняет одну целую страницу вниз, а также должен позволять ему расти вниз, чтобы охватить больше внутреннего контента.

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

Просто добавьте эти две строки в ваш идентификатор CSS #some_div

display: block;
overflow: auto;

После этого вы получите то, что ищете!

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

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

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

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

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

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

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

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

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

Вы также можете использовать

 display: inline-block;

мой работал с этим

ПОКРЫТИЕ БЕЗ ПОЗИЦИИ: ИСПРАВЛЕНО

По-настоящему классным способом, который я понял для недавнего меню, было установить тело в:

position: relative

и установите свой класс-оболочку следующим образом:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

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

использовать flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Хорошо, я попробовал что-то вроде этого:

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

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

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