Высота 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

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

display: block;
overflow: auto;

И не трогай height

Answer 2

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

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

Answer 6

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

Answer 7

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

display: block;
overflow: auto;

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

Answer 8

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

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

Answer 9

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

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

MainDiv (куда идет весь контент): Display: table; overflow-y: auto

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

Answer 10

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

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

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