Висота дайвінга 100% і розширюється, щоб відповідати вмісту

У мене на своїй сторінці є елемент div, його висота встановлена ​​на 100%. Висота тіла також встановлена ​​на 100%. Внутрішній дів має передумови і все, що відрізняється від фону тіла. Це працює для того, щоб зробити висоту div на 100% від висоти екрана браузера, але проблема полягає в тому, що у мене є вміст всередині цього діва, який виходить вертикально за межі висоти екрана браузера. Коли я прокручую вниз, діва закінчується в тому місці, коли вам довелося почати прокручувати сторінку, але вміст переповнює поза цим. Як змусити діву завжди пройти донизу, щоб відповідати внутрішньому змісту?

Ось спрощення мого 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;
}

Зазвичай ця проблема виникає, коли дочірні елементи Батьківського діву плавають. Ось останнє рішення проблеми:

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

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

Потім у своєму HTML додайте клас .clearfix у свій батьківський Div. Наприклад:

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

Це має працювати завжди. Ви можете назвати ім'я класу як .group замість .clearfix , оскільки це зробить код більш семантичним. Зауважте, що не потрібно додавати крапку або навіть пробіл у значенні Вмісту між подвійною цитатою "". Також переповнення: авто; може вирішити проблему, але це спричиняє інші проблеми, такі як показ смуги прокрутки, і не рекомендується.

Джерело: Блог Лізи Каталоно та Кріса Койєра

Якщо ви просто залишити height: 100%і використовувати займе стільки місця , як зміст всередині . Таким чином весь текст залишиться на чорному тлі.display:block;divdiv

Це питання може бути старим, але воно заслуговує на оновлення. Ось ще один спосіб зробити це:

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

Спробуйте це:

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

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

IE6 та більш ранні версії не підтримують властивість мінімальної висоти.

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

Це властивість мінімальної висоти на корпусі повинно ЗИМОЖИТИ, щоб фон був принаймні таким же високим, як один вікно перегляду, якщо ваш вміст не заповнює одну цілу сторінку донизу, але він також повинен дозволяти зростати вниз, щоб охопити більше внутрішнього вмісту.

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

Просто додайте ці два рядки у свій css id #some_div

display: block;
overflow: auto;

Після цього ви отримаєте те, що шукаєте!

Я не зовсім впевнений, що я зрозумів це питання, тому що це досить відверта відповідь, але тут іде ... :)

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

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

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

Сучасні браузери підтримують блок "висота вікна перегляду". Це дозволить розширити поділ до доступної висоти вікна перегляду. Я вважаю це більш надійним, ніж будь-який інший підхід.

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

Навіть ти можеш так зробити

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

Сюди входить кожен ваш динамічний поділ відповідно до вмісту. Припустимо, якщо у вас є спільний 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;
}

Це не зовсім точний спосіб його написання, але якщо основний показ діва ви робите як таблицю, він розширюється, і тоді я реалізував смуги прокрутки.