увеличьте высоту div с его содержимым - PullRequest
Новая
       58

увеличьте высоту div с его содержимым

351 голосов
/ 10 ноября 2009

У меня есть эти вложенные элементы div, и мне нужно, чтобы основной контейнер расширился (по высоте), чтобы вместить 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 accomodate 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 не растягивается, чтобы вместить все внутренние элементы, в результате чего они продолжают идти на фоне.

Как я могу решить эту проблему?

Ответы [ 24 ]

4 голосов
/ 29 сентября 2014

Прежде чем что-либо делать, проверьте правила css: 

{ position:absolute }

Удалите, если они существуют и не нужны.

4 голосов
/ 04 апреля 2017

Плавающие элементы не занимают место внутри родительского элемента, как следует из названия, они плавают! Таким образом, если высота явно не указана для элемента, у которого всплывают дочерние элементы, то родительский элемент будет сжиматься и не принимать размеры дочернего элемента, даже если его заданные overflow:hidden; его дочерние элементы могут не отображаться на экране , Существует несколько способов решения этой проблемы:

  1. Вставьте другой элемент под плавающим элементом со свойством clear:both; или используйте clear:both; для :after плавающего элемента.

  2. Используйте display:inline-block; или flex-box вместо float.

3 голосов
/ 24 июля 2013

Похоже, это работает 

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

Он принимает размер экрана как минимум, а если контент расширяется, он увеличивается.

2 голосов
/ 22 мая 2018

Очень простой способ

На родительском DIV:

height: 100%;

Эта работа для меня каждый раз

2 голосов
/ 03 октября 2017

Вы пробовали традиционный способ? дать основную высоту контейнера: авто 

#container{height:auto}

Я использовал это, и это работало большую часть времени со мной.

2 голосов
/ 30 мая 2016

Я добавил Bootstrap в проект с тегами section, которые я установил на 100% высоты экрана. Он работал хорошо, пока я не сделал проект адаптивным, после чего я позаимствовал часть ответа jennyfofenny , поэтому фон моего раздела соответствовал фону содержимого, когда размер экрана изменялся на меньших экранах .

Мой новый section CSS выглядит так: 

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 голосов
/ 16 марта 2012

В CSS: #clear_div{clear:both;}

После тега div внутреннего div добавьте этот новый следующий div 

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

http://www.w3schools.com/cssref/pr_class_clear.asp: для получения дополнительной информации

1 голос
/ 26 июня 2016

Я попробовал это, и это сработало 

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
1 голос
/ 21 апреля 2012

Я сам столкнулся с этим в проекте - у меня была таблица внутри div, которая выливалась из нижней части div. Ни одно из исправлений высоты, которые я пробовал, не сработало, но я нашел странное исправление для этого, то есть поместить абзац внизу элемента div с точкой в ​​нем. Затем стиль «цвет» текста должен быть таким же, как фон контейнера. Работал аккуратно, как вам угодно, и никакой JavaScript не требуется. Неразрывный пробел не будет работать - как и прозрачное изображение.

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

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

0 голосов
/ 15 января 2019

Вы можете использовать CSS Grid Layout . На данный момент поддержка довольно широкая: отметьте ее на caniuse .

Вот пример на 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
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...