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


172

У меня есть элемент 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


Об этом спросили несколько недель назад. Я посмотрю, смогу ли я найти этот вопрос. Я думаю, что прокомментировал это. edit Я считаю, что ваш вопрос похож на это: stackoverflow.com/questions/9398313/…
jmbertucci

пожалуйста, ваш код для лучшего понимания
sandeep

Можете ли вы опубликовать полный код PLS
Свен Бидер

23
Вы хотите, чтобы все мои тысячи строк PHP-кода, CSS и JavaScript? Я разместил часть css, которая имела отношение к вопросу ...
Joey

2
NECROPOST является GO: установка свойства переполнения обычно исправляет проблемы , как их там , где содержание внутри DIV простирается мимо него ( overflow: hidden;, overflow: scroll;, и т.д.).
AlbertEngelB

Ответы:


308

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

display: block;
overflow: auto;

И не трогай height


4
Работал отлично. Мне нужно добавить height: 100%к html, bodyи контейнера DIV , чтобы сделать его заполнить высоту , когда не было достаточно содержания , хотя.
Нико Хюйсамен

изумительное решение, но вы можете на самом деле коснуться высоты, если объектив является чем-то вроде отзывчивой оконной примерки
Алексис Рабаго Карвахаль

Это display: block;необходимо? Div уже являются элементами уровня блока.
Макс Хейбер,

он добавляет для меня внутреннюю полосу прокрутки (как горизонтальную, так и вертикальную)
Натан Х

Если родительский элемент все еще немного выше дочерних элементов, проверьте наличие лишних пробелов и / или  удалите их. Также попробуйте отрегулировать высоту строки. Например, я добавил line-height: 0, потому что мне не нужен текст, просто чтобы показать изображение.
Зоргатоне

57

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

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

3
ИМО, это отвечает на вопрос "Как сделать так, чтобы div всегда шел до самого дна, чтобы соответствовать внутреннему содержанию?" лучше, чем отмеченный в данный момент ответ, который просто включает прокрутку переполнения, а не обеспечивает расширение div / body в соответствии с его содержимым. +1
Jammerz858

Работал для моего случая. Спасибо!
Тайсон Неро

Возможно, стоит отметить, что по какой-то причине он не работает, если heightесть 100%и min-heightесть auto- я бы ожидал, что они будут взаимозаменяемыми в этом случае, но похоже, что это не так.
PeaBrain

13

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

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


8

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


Где ты использовал display: block? Я не вижу этого в вашем вопросе.
Гонки легкости на орбите

Я добавил его в #some_div после того, как Ронни предложил, но это не решило проблему.
Джои

1
Не могли бы вы попробовать добавить float: нет; к тому же #some_div css
RonnieVDPoel

Вместо того float: none;, чтобы использовать clear:both;. Он делает то же самое, но более кроссбраузерен, @RonnieVDPoel
Cannicide

7

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

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

1
Если вы собираетесь писать на старый вопрос, рекомендуется использовать текущие значения (AKA без префиксов на flex).
jhpratt

Извините, я не знаю, о чем вы говорите.
user9459537

1
Flex-префиксы уже давно не нужны.
jhpratt

А какие есть?
user9459537

5

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

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

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

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

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

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


3

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


1

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

display: block;
overflow: auto;

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


0

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

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

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

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


0

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

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

0

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

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

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



0

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

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

position: relative

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

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

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


0

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

.parent{
    display: flex
}

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

0

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.