zwiększ wysokość diva wraz z zawartością

376

Mam te zagnieżdżone div i potrzebuję głównego kontenera, aby rozwinął się (na wysokości), aby pomieścić DIV wewnątrz

    <!-- 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 to:

* {
    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;
}

Problem, który mam, polega na tym, #main_contentże nie rozciąga się, aby pomieścić wszystkie wewnętrzne div, w wyniku czego nadal działają na tle.

Jak mogę rozwiązać ten problem, biorąc pod uwagę powyższy scenariusz?

css height Patrick
źródło
5
Chłopaki, dziękuję wszystkim za odpowiedzi! najlepszym rozwiązaniem dla mojego konkretnego przypadku było zakodowanie na stałe BR, aby wyczyścić obie strony (dzięki Jennyfofenny i Ricebowl) W każdym razie działały również inne rozwiązania: wprowadzenie przelewu: auto było w porządku, a zmienna #main_content również była w porządku (chociaż ir zmniejszono szerokość tej div do wielkości div div dziecka). Teraz, będąc nowicjuszem, zastanawiam się: czy te rozwiązania mają wady, czy mogę używać ich obojętnie? (np. może jeden z nich nie działa z IE6 lub podobnym ...)
Patrick
1
@Patrick, jeśli chcesz dalej rozwijać swoje pytanie, kliknij link „edytuj” (pod bieżącym tekstem pytania) i dodaj kolejne pytania. Konwencja sugeruje użycie czegoś w rodzaju <strong>Edited</strong>$Reason_for_revising_question...Być może trzeba zmienić tytuł pytania, aby odzwierciedlić zmiany, jeśli w jego centrum znajduje się poważna zmiana lub uzupełnienie. =)
David mówi, że przywróć Monikę
4
Nigdy też nie zamknąłeś divtagu za pomocą id='container'. To może powodować pewne problemy.
Batkins
@patrick, nie masz również CSS dla .clearklasy. Zapomniałeś o tym, czy jest w twoim oryginalnym kodzie? .clearKlasa na to brjest bardzo ważne, ponieważ @jennyfofenny wspomina w swojej odpowiedzi.
Cannicide

Odpowiedzi:

280

Musisz wymusić a clear:both zanim #main_contentdiv zostanie zamknięty. Prawdopodobnie przeniósłbym div <br class="clear" />;do #main_contentdiv i ustawiłem CSS na:

.clear { clear: both; }

Aktualizacja: To pytanie wciąż generuje spory ruch, więc chciałem zaktualizować odpowiedź za pomocą nowoczesnej alternatywy przy użyciu nowego trybu układu w CSS3 o nazwie Elastyczne pudełka lub 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>
Rozwiń fragment kodu

Większość współczesnych przeglądarek obsługuje obecnie Flexboksa i jednostki rzutni , ale jeśli musisz utrzymać obsługę starszych przeglądarek, sprawdź zgodność dla konkretnej wersji przeglądarki.

jennyfofenny
źródło
4
Oto artykuł w3schools na temat właściwości clear CSS. Zasadniczo „przezroczysty” oznacza, że ​​element, do którego zastosowano przezroczysty, zaczyna się poniżej pływaków w swoim przepływie (tylko lewy, prawy lub oba).
jennyfofenny
230

Spróbuj tego: overflow: auto;

To zadziałało dla mojego problemu ..

sipőcz péter
źródło
10
+1, to rozwiązanie jest eleganckie i nie dodaje do strony niewidocznego tagu. Zobacz to skrzypce: jsfiddle.net/XmKrm/1
Nabil Kadimi
5
automatyczne przelewanie działało dla mnie dobrze. Do dodania paska przewijania, jeśli wysokość automatycznego kontenera z przepełnieniem jest mniejsza niż zawartość w środku. Zmień go też lub ustaw wysokość: auto wraz z przelewem.
Bryan Myers
@ Roozbeh15 dodaj display: block;to
BadAtPHP
2
Najlepsze i najłatwiejsze rozwiązanie ... Uratowałeś mi dzień. Dzięki
Kashyap Kotak
Święta Szetto, działało to cudownie. ktoś chce wyjaśnić mechanizm, dlaczego to zadziałało?
Merkurial
86

dodaj następujące:

overflow:hidden;
height:1%;

do twojego głównego div. Eliminuje potrzebę dodatkowych <br />dla wyczyszczenia.

Nacięcie
źródło
łał! to było dokładnie odwrotne do tego, czego bym się spodziewał! przepełnienie: ukryte = rozwiń, aby dopasować zawartość! nigdy bym tego nie zgadł!
Mulllhausen,
Tak, to też działało dla mnie i nie ma w pełni sensu, dlaczego. Jakieś wyjaśnienie, dlaczego działają „wysokość 1%” i „ukryty przelew”?
acarlon
1
naprawdę, jak to działa, a nawet dlaczego to działa, jeśli nie jest ustawiona wysokość, dlaczego ukryty przelew nie tylko ukrywa wszystko (wysokość wynosi 0), ale rozszerza się, czy jest jakieś wytłumaczenie lub po prostu wierzyć i być szczęśliwym?
Max Yari,
1
overflow: hidden ukrywa paski przewijania, ale zachowuje wielkość bloku
authentictech
działało dla mnie z „przepełnieniem: ukrytym”, ale „przepełnienie: automatyczne” również działało i nie wyświetlało pasków przewijania.
Whirlwind991
60

jako alternatywny sposób możesz spróbować tego, co może być przydatne w niektórych sytuacjach 

display:table;

jsFiddle

h0mayun
źródło
24

Chciałbym po prostu użyć

height: auto;

w twojej div. Tak, wiem, że jestem trochę spóźniony, ale pomyślałem, że to mogłoby pomóc komuś takiemu, gdyby mi tu był.

Charles
źródło
height: auto;powoduje przejście wszystkich elementów poniżej na górę. Dzięki tej właściwości na moim głównym div treści, stopka mojej strony przesuwa się w górę, tak że dotyka nagłówka i nakłada się na moją div treści.
Aaron Franke
1
To było dla mnie rozwiązanie. Dzięki!
Nik Hammer-Ellis,
14

Thw powinny działać:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
Steerpike
źródło
dodanie przelewu: auto działało, chociaż jeśli dodam także szerokość: 100%, powoduje to, że div (#main_content) jest nieco większy niż div div. Nie rozumiem dlaczego!
Patrick
2
to dlatego, że dopełnienie liczy się oprócz podanej szerokości, więc szerokość twojego elementu wynosi 100% + 5px lewe dopełnienie + 5px prawe dopełnienie
NickV
1
przelew: automatyczny; pracował dla mnie, dziękuję bardzo.
Cosco Tech
9

Bardzo prosty sposób

Na rodzicielskim DIV:

height: 100%;

Ta praca dla mnie za każdym razem

Daniel Beltrami
źródło
8

Użyj tagu span z display:inline-blockdołączonym css. Następnie można użyć CSS i manipulować jak div na wiele sposobów, ale jeśli nie zawierają widthani heightnie rozszerza się i wycofuje się na podstawie jego treści.

Mam nadzieję, że to pomaga.

ciemny marc
źródło
Twoja nadzieja zadziałała: przynajmniej mi pomogła! :) Przy okazji zostawiłem swój element jako div(zamiast a span), ale display: inline-blocknadal działałem w moim przypadku (Chromium).
snapfractalpop,
6

Zazwyczaj myślę, że można to rozwiązać poprzez wymuszenie clear:bothreguły na ostatnim elemencie potomnym elementu #items_list.

Możesz użyć:

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

Lub, jeśli używasz języka dynamicznego, dodaj dodatkową klasę do ostatniego elementu wygenerowanego w dowolnej pętli, która tworzy samą listę, aby uzyskać coś w html, na przykład:

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

i css

.last_list_item {clear: both; }
David mówi, że przywraca Monikę
źródło
6

Ten problem powstaje, gdy elementy potomne rodzica div są unoszone na wodzie. Oto najnowsze rozwiązanie problemu:

W swoim pliku CSS napisz następującą klasę o nazwie .clearfix wraz z pseudo selektorem : after 

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

Następnie w kodzie HTML dodaj klasę .clearfix do rodzica Div. Na przykład:

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

Powinno zawsze działać. Możesz wywołać nazwę klasy jako .group zamiast .clearfix , ponieważ dzięki temu kod będzie bardziej semantyczny. Należy pamiętać, że nie trzeba dodawać kropki ani nawet spacji w wartości Treści między podwójnym cudzysłowem „”. Również przepełnienie: automatyczne; może rozwiązać problem, ale powoduje inne problemy, takie jak wyświetlanie paska przewijania i nie jest zalecane.

Źródło: Blog Lisa Catalano i Chris Coyier

Ifti Mahmud
źródło
5

dodaj właściwość float do #main_contentdiv - następnie rozszerzy się, aby zawrzeć jego pływającą zawartość

Promień
źródło
Dzięki Ray, to zadziałało, chociaż zmniejszyło div do rozmiaru jego zawartości (#items_list), która ma szerokość: 400px; Twoje rozwiązanie byłoby naprawdę dobre, gdybym mógł sprawić, że #main_content pozostanie na pełnej szerokości - jakieś sugestie?
Patrick
@Ray 2 i nieco później, a to tylko uratowało mi potencjalny ból głowy z podobnym problemem. Dziękuję Ci!
John H
4

Zanim cokolwiek zrobisz, sprawdź reguły css za pomocą:

{ position:absolute }

Usuń, jeśli istnieją i nie potrzebujesz ich.

onalbi
źródło
2
Ponieważ „elementy pozycjonowane absolutnie są usuwane z przepływu, dlatego są ignorowane przez inne elementy. Nie można więc ustawić wysokości rodziców zgodnie z pozycją absolutnie pozycjonowaną”. stackoverflow.com/questions/12070759/…
Federico
4

Elementy pływające nie zajmują przestrzeni w elemencie macierzystym, jak sama nazwa sugeruje, że się unoszą! Zatem jeśli wysokość nie zostanie wyraźnie podana elementowi, którego elementy potomne są unoszone, wówczas element macierzysty będzie się kurczył i będzie wyglądał, jakby nie przyjmował wymiarów elementu potomnego, również jeśli podane elementy overflow:hidden;potomne mogą nie pojawić się na ekranie. Istnieje wiele sposobów rozwiązania tego problemu:

  1. Wstawić kolejny element poniżej elementu powierzchnia tynku z clear:both;własności lub użytkowania clear:both;na :afterelementu powierzchnia tynku.

  2. Użyj display:inline-block;lub flex-boxzamiast float.

Apoorv Srivastava
źródło
3

Wygląda na to, że to działa

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

Przyjmuje rozmiar ekranu jako minimalny, a jeśli zawartość się powiększa, rośnie.

Substancja MX
źródło
2

Dodałem Bootstrap do projektu ze sectionznacznikami, które ustawiłem na 100% wysokości ekranu. To działało dobrze aż zrobiłem projekt czuły, przy której pożyczyłem część jennyfofenny „s odpowiedź więc tło mojej sekcji pasowało do tła treści, gdy rozmiar ekranu zmieniał się na mniejszych ekranach.

Mój nowy sectionCSS wygląda następująco:

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;
}

Załóżmy, że masz sekcję w określonym kolorze. Używając min-height, jeśli szerokość sekcji zmniejsza się z powodu mniejszego ekranu, wysokość sekcji będzie się powiększać, zawartość pozostanie w obrębie sekcji, a tło pozostanie pożądanym kolorem.

Adrian
źródło
2

Czy wypróbowałeś tradycyjny sposób? podaj wysokość głównego pojemnika: auto

#container{height:auto}

Użyłem tego i działało to ze mną przez większość czasu.

Michelle Dimwaite
źródło
1

Sam wpadam na ten projekt - miałem stolik wewnątrz div, który wysypywał się z dołu div. Żadna z poprawek wysokości, które próbowałem, nie zadziałała, ale znalazłem dziwną poprawkę, a mianowicie umieszczenie akapitu na dole div z tylko kropką. Następnie nadaj styl „kolorowi” tekstu, aby był taki sam jak tło kontenera. Działa schludnie, jak chcesz, i nie wymaga javascript. Nieprzerwana przestrzeń nie będzie działać - podobnie jak przezroczysty obraz.

Najwyraźniej po prostu trzeba było zobaczyć, że pod tabelą jest trochę treści, aby ją rozciągnąć. Zastanawiam się, czy to zadziała dla kogokolwiek innego.

Jest to coś, co sprawia, że ​​projektanci uciekają się do układów opartych na tabelach - ilość czasu, którą spędziłam na opracowywaniu tych rzeczy i dostosowywaniu ich do różnych przeglądarek, doprowadza mnie do szału.

Nancy Hastings-Trew
źródło
To musi być jakiś sposób, aby to zrobić za pomocą css, ale nie mam pojęcia, co by to było. To działało dla mnie, ale musiałem dodać szerokość: 100%; wysokość: auto; min-wysokość: 100%; pozycja: względna;
RationalRabbit
1

Próbowałem tego i zadziałało

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
Ahmed Aboelela
źródło
0

Jeśli używasz jQuery UI, mają już klasę, działa po prostu urok, dodaj <div>u dołu wewnątrz div, który chcesz rozwinąć, a height:auto; następnie dodaj nazwę klasy ui-helper-clearfix lub użyj tego atrybutu stylu i dodaj tak, jak poniżej :

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

dodaj klasę jQuery UI do clear div, a nie div, który chcesz rozwinąć.

Lucas M. Oliveira
źródło
0

Wiem, że jest to trochę stary wątek, ale można to osiągnąć za pomocą min-heightwłaściwości CSS w czysty sposób, więc zostawię to tutaj do przyszłych odniesień:

Zrobiłem skrzypce na podstawie kodu opublikowanego tutaj tutaj: http://jsfiddle.net/U5x4T/1/ , gdy usuwasz i dodajesz divy wewnątrz, zauważysz, jak pojemnik się powiększa lub zmniejsza

Jedyne 2 rzeczy, które musisz to osiągnąć, oprócz kodu OP to:

* Przepełnienie w głównym kontenerze (wymagane dla pływających div)

* właściwość css o minimalnej wysokości, więcej informacji dostępnych tutaj: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Juan Carlos Alpizar Chinchilla
źródło
0

Dodano wyświetlanie: wbudowane w div i rosło automatycznie (nie przewijać), gdy zawartość wysokości stała się większa niż ustawiona wysokość div 200px

Jelle
źródło
1
To nie jest jednoznaczna odpowiedź na pytanie. W przypadku uwag użyj funkcji komentowania.
ksbg
0

Możesz użyć układu siatki CSS . Wsparcie jest obecnie dość szerokie: sprawdź to w kajaku .

Tutaj jest przykład na jsfiddle. Również przykład z mnóstwem tekstów.

Kod HTML:

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

Kod 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
Sharikov Vladislav
źródło
0

Próbowałem prawie wszystkich wyżej wymienionych sugestii i żadna z nich nie działała. Jednak „display: table” załatwiło sprawę.

PongGod
źródło