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

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

Здесь упрощение моего CSS:

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

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

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

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

ОТВЕТЫ

Ответ 1

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

display:block;
overflow:auto;

И не прикасайтесь к height

Ответ 2

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

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

Ответ 3

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

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

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

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

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

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

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

Ответ 4

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

Ответ 5

Попробуйте следующее:

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

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

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