змусити висоту Діва розширити його вміст

376

У мене є ці вкладені диви, і мені потрібен основний контейнер для розширення (по висоті) для розміщення DIV всередині

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS це:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

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

Як я можу вирішити цю проблему, враховуючи вищевказаний сценарій?

css height

— патрик
джерело

5

Хлопці дякую всім за відповіді! найкращим рішенням для мого конкретного випадку було жорстке кодування BR, щоб очистити обидві сторони (дякую Дженніфофенні та також Ricebowl) Так чи інакше, також спрацювали й інші рішення: надіти переповнення: авто було нормально, і плаваючий #main_content також був нормальний (хоча ir зменшив ширину цього діва до розміру дочірніх дівок). Тепер, коли я новачок, мені цікаво: чи мають ці рішення недоліки, чи я можу їх використовувати байдуже? (напр., можливо, один з них не працює з IE6, або подібним ...)

— Патрік

1

@Patrick, якщо ви хочете в подальшому розробити своє запитання, натисніть посилання "редагувати" (під поточним текстом запитання) та додайте до подальших питань. Конвенція пропонує використовувати щось на кшталт <strong>Edited</strong>$Reason_for_revising_question...Вам може знадобитися змінити назву питання, щоб відобразити зміни, якщо є основна зміна чи доповнення в її фокусі. =)

— Девід каже відновити Моніку

4

Ви також ніколи не закривали divтег id='container'. Це може спричинити деякі проблеми.

— Баткінс

@patrick, у вас також немає CSS для .clearкласу. Ви забули його чи це у вашому оригінальному коді? .clearКлас на те , що brдуже важливо , так як @jennyfofenny згадує в своїй відповіді.

— Cannicide

280

Вам потрібно примусити a, clear:bothперш ніж #main_contentдіва закриється. Я, мабуть, переміщую <br class="clear" />;в #main_contentdiv і встановлюю CSS таким:

.clear { clear: both; }

Оновлення: це питання все ще отримує неабияку кількість трафіку, тому я хотів оновити відповідь на сучасну альтернативу, використовуючи новий режим компонування в CSS3 під назвою Гнучкі поля або Flexbox :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Розгорніть фрагмент

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

— jennyfofenny
джерело

4

Ось стаття w3schools про властивість очищення CSS. В основному, чіткий означає, що елемент, до якого застосовується прозоре, починається нижче плавців у своєму потоці (або лише зліва, тільки справа або обоє).

— jennyfofenny

230

Спробуйте це: overflow: auto;

Це спрацювало на мою проблему ..

— sipőcz péter
джерело

10

+1, це рішення елегантне і не додає невидимий тег на вашу сторінку. Дивіться цю скрипку: jsfiddle.net/XmKrm/1

— Nabil Kadimi

5

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

— Брайан Майєрс

@ Roozbeh15 додай display: block;разом з цим

— BadAtPHP

2

Найкраще і найпростіше рішення ... Ти врятував мені день. Спасибі

— Кашяп Котак

святий Шет це чудово спрацювало. комусь байдуже пояснити під механізмом, чому це спрацювало?

— Меркуріал

86

додати наступне:

overflow:hidden;
height:1%;

до вашого головного діла. Виключає потребу в додатковому <br />для ясного.

— Нік
джерело

Оце Так! це зробило прямо протилежне тому, що я б очікував! переповнення: приховано = розгорнути відповідно до вмісту! я ніколи б не здогадався про це!

— mulllhausen

Так, це працювало і для мене, і це не має сенсу, чому. Будь-яке пояснення, чому працюють "висота 1%" та "перелив прихованого"?

— акарлон

1

насправді як це відбувається і навіть чому він працює, якщо не встановлена висота, чому переповнений прихований не просто приховує все (cos висота 0), але розширює себе, чи є якесь пояснення чи просто вірити і бути щасливим?

— Макс Ярі

1

переповнення: прихований приховує ScrollBars , але зберігає розмір блоку

— authentictech

працював для мене лише з «overflow: hidden», але «overflow: auto» також працював і не показував панелі прокрутки.

— Вихор991

60

як альтернативний спосіб ви також можете спробувати це, що може бути корисним у деяких ситуаціях

display:table;

jsFiddle

— h0mayun
джерело

24

Я б просто скористався

height: auto;

у вашому діві. Так, я знаю, що я трохи спізнююсь, але я подумав, що це може допомогти комусь, як це допомогло б мені, якби воно було тут.

— Карла
джерело

height: auto;змушує всі елементи нижче переміщуватися до верху. Завдяки цій властивості в моєму головному розділі вмісту, колонтитул моєї сторінки рухається вгору, так що він торкається заголовка та перекриває мій поділ.

— Аарон Франке

1

Це було рішенням для мене. Дякую!

— Нік Хаммер-Елліс

14

Нижче повинні працювати:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

— Стріпик
джерело

додавання переповнення: автоматично працювало, хоча якщо я додаю також ширину: 100%, це призводить до того, що div (#main_content) буде дещо більшим, ніж його батьківський дів. Не зрозумів чому!

— патрік

2

це тому, що підкладка нараховується на додаток до вказаної ширини, тож ширина вашого елемента становить 100% + 5 пікс. лівої підкладки + 5 пікселів праворуч

— NickV

1

переповнення: авто; працював на мене, велике спасибі Ведді.

— Cosco Tech

9

Дуже простий спосіб

На батьківському DIV:

height: 100%;

Ця робота для мене щоразу

— Даніель Белтрамі
джерело

8

Використовуйте тег span із display:inline-blockдоданим до нього css. Потім ви можете використовувати CSS і маніпулювати нею, як div, безліччю способів, але якщо ви не включите widthабо heightвін розширюється і відбирається на основі його вмісту.

Сподіваюся, що це допомагає.

— темний марк
джерело

Ваше сподівання спрацювало: це мені принаймні допомогло! :) До речі, я залишив свій елемент як div(замість span), але display: inline-blockвсе ще працював у моєму випадку (Хром).

— snapfractalpop

6

Як правило, я думаю, що це можна вирішити, примусивши clear:bothправило про останній дочірній елемент #items_list.

Ви можете використовувати:

#items_list:last-child {clear: both;}

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

<div id="list_item_20" class="last_list_item">

і css

.last_list_item {clear: both; }

— Девід каже повернути Моніку
джерело

6

Ця проблема виникає, коли дочірні елементи батьківського Div плавають. Ось останнє рішення проблеми:

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

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

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

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

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

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

— Іфті Махмуд
джерело

5

додати властивість float до #main_contentdiv - тоді він розшириться, щоб містити його плаваючий вміст

— Промінь
джерело

Спасибі Рей, це спрацювало, хоча воно зменшило розмір вмісту вмісту (#items_list), який має ширину: 400px; Ваше рішення було б дуже добре, якби я зміг зробити #main_content на повну ширину - будь-які пропозиції?

— патрік

@Ray 2 і трохи років потому, і це просто врятувало мені потенційний головний біль із подібною проблемою. Дякую!

— Джон Н

4

Перш ніж щось робити, перевіряйте правила css за допомогою:

{ position:absolute }

Видаліть, якщо вони є, і вони не потрібні.

— onalbi
джерело

2

Тому що "абсолютні позиціоновані елементи видаляються з потоку, таким чином, ігноруються іншими елементами. Отже, ви не можете встановити висоту батьків відповідно до абсолютно розміщеного елемента". stackoverflow.com/questions/12070759/…

— Федеріко

4

Плаваючі елементи не займають місця всередині батьківського елемента, як випливає з назви, вони плавають! Таким чином, якщо висота явно не передбачена для елемента, що має його дочірні елементи, плаваючий, то батьківський елемент, здається, зменшиться і, схоже, не сприймає розміри дочірнього елемента, також якщо його дані overflow:hidden;його діти можуть не відображатися на екрані. Існує кілька способів вирішити цю проблему:

Вставте інший елемент нижче плаваючий елемента з clear:both;майном або використанням clear:both;на :afterчастину плаваючого елементу.
Використовувати display:inline-block;або flex-boxзамість цього float.

— Апоорв Срівастава
джерело

3

Схоже, це працює

html {
 width:100%;
 height:auto;
 min-height:100%
}

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

— SubstanceMX
джерело

2

У CSS: #clear_div{clear:both;}

Після тегу div внутрішнього div додайте цей новий наступний div

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : для отримання додаткової інформації

— інгрід
джерело

2

Я додав Bootstrap до проекту з sectionтегами, які я встановив на 100% висоти екрана. Він працював добре , поки я не зробив проект чуйний, в який момент я запозичив частину jennyfofenny «s відповідь щоб фон мого розділу відповідав фону вмісту, коли розмір екрана змінювався на менших екранах.

Мій новий sectionCSS виглядає так:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

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

— Адріан
джерело

2

Ви спробували традиційний спосіб? задайте висоту основної ємності: авто

#container{height:auto}

Я цим користувався, і він працював зі мною більшість разів.

— Мішель Дімвайт
джерело

1

Я сам стикаюся з цим над проектом - у мене був стіл всередині діва, який висипався з нижньої частини діва. Жодна з виправлень висоти, яку я спробував, не працювала, але я знайшов для цього дивне виправлення, а це - поставити абзац в нижній частині діва з лише періодом. Тоді стилізуйте "колір" тексту таким же, як фон контейнера. Працювали акуратно, як завгодно, і не потрібно JavaScript. Нерозривний простір не буде працювати - як і прозоре зображення.

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

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

— Ненсі Гастінгс-Трев
джерело

Повинно це зробити із css, але я не маю уявлення, що це було б. Це працювало для мене, але мені довелося додати ширину: 100%; висота: авто; мінімальна висота: 100%; положення: відносне;

— RationalRabbit

1

Я спробував це, і це спрацювало

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

— Ахмед Абоела
джерело

0

Якщо ви використовуєте інтерфейс jQuery, у них вже є клас, який працює, просто шарм, додайте <div>внизу всередині div, яке ви хочете розгорнути, а height:auto; потім додайте ім'я класу ui-helper-clearfix або використовуйте цей атрибут стилю і додайте так само, як нижче :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

додайте клас JQuery UI в ясний div, а не діву, яку ви хочете розгорнути.

— Лукас М. Олівейра
джерело

0

Я знаю, що це якась стара тема, однак, це можна досягти за допомогою min-heightвластивості CSS чистим способом, тому я залишу це тут для подальших посилань:

Я склав загадку на основі розміщеного тут коду ОП: http://jsfiddle.net/U5x4T/1/ , коли ви видаляєте та додаєте дірки всередину, ви помітите, як контейнер розширюється чи зменшується в розмірах

Єдині дві речі, необхідні для досягнення цього, крім коду OP:

* Переповнення в основний контейнер (необхідний для плаваючих div)

* властивість css min-height, більше інформації можна отримати тут: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Хуан Карлос Альпісар Шинчілла
джерело

0

Додано дисплей: вбудований в діву, і він зростав автоматично (а не прокрутки), коли вміст висоти збільшився, ніж встановлена висота Div 200px

— Желе
джерело

1

Це не однозначна відповідь на питання. Для зауважень використовуйте функцію коментарів.

— ksbg

0

Ви можете використовувати макет сітки CSS . Підтримка на даний момент досить широка: перевірити це на каніусі .

Ось приклад на jsfiddle. Також приклад з тоннами текстових матеріалів.

HTML-код:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSS-код:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— Шаріков Владислав
джерело

0

Я спробував майже кожну пропозицію, перелічену вище, і жодна з них не спрацювала. Однак "display: table" зробив для мене трюк.

— PongGod
джерело

-1

Не потрібно використовувати багато CSS, просто використовуйте bootstrap, а потім використовуйте:

class="container"

для діва, який потрібно заповнити.

Ви можете отримати завантажувальний веб-сайт звідси

— Тадео Арло
джерело