it-swarm.com.ru

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

Правка: Вот скриншот проблемы: div problem

130
Joey

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

display: block;
overflow: auto;

И не трогайте height

241
João Pimentel Ferreira

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

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

Обычно эта проблема возникает, когда всплывают дочерние элементы родительского 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 между двойными кавычками "". Также переполнение: авто; может решить проблему, но вызывает другие проблемы, такие как показ полосы прокрутки, и не рекомендуется.

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

12
Ifti Mahmud

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

6
RonnieVDPoel

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

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

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

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

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

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

4
Ace Frahm

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

3
Thomas Smart

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

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

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

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

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

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

0
jlisham

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

display: block;
overflow: auto;

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

0
singhviku

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

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

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

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

0
alex

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

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

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

0
ahmed sharief