Powiększ wysokość div wraz z jego zawartością

Spróbuj tego: overflow: auto;

Dodać:

overflow:hidden;
height:1%;

Do twojego głównego div. Eliminuje potrzebę dodatkowego <br /> dla klarowności.

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

display:table;

JsFiddle

Użyłbym tylko

height: auto;

W Twoim div. Tak, Wiem, że jestem trochę spóźniona, ale pomyślałem, że to może pomóc komuś takiemu jak mnie, gdyby to było tutaj.

THW następujące powinny działać:

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

Bardzo prosty sposób

On parent DIV:

height: 100%;

To działa dla mnie za każdym razem

Użyj znacznika span z dołączonym display:inline-block css. Możesz następnie użyć CSS i manipulować nim jak div na wiele sposobów, ale jeśli nie dołączysz width lub height, rozszerza się i wycofuje na podstawie jego zawartości.

Zazwyczaj myślę, że można to rozwiązać wymuszając regułę clear:both na ostatnim elemencie potomnym #items_list.

Możesz użyć:

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

Lub, jeśli używasz dynamicznego języka, dodaj dodatkową klasę do ostatniego elementu wygenerowanego w dowolnej pętli, która sama utworzy listę, więc skończysz z czymś w html, na przykład:

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

I css

.last_list_item {clear: both; }

Ten problem pojawia się, gdy elementy potomne rodzica Div są unoszone. Oto najnowsze rozwiązanie problemu:

W pliku CSS wpisz następującą klasę o nazwie .clearfix wraz z pseudo selektorem : Po

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

Następnie w Twoim HTML dodaj .clearfix class to your parent Div. Na przykład:

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

źródło: Blog Lisy Catalano i Chrisa Coyiera

Przed zrobieniem czegokolwiek sprawdź reguły css z:

{ position:absolute }

Usuń, jeśli istnieją i nie są potrzebne.

Dodaj właściwość float do #main_content div - zostanie ona rozszerzona o zawartość float

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

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

Pobiera rozmiar ekranu jako minimum, a jeśli zawartość się rozszerza, rośnie.

Elementy pływające nie zajmują przestrzeni wewnątrz elementu nadrzędnego, jak sama nazwa wskazuje, pływają! Tak więc, jeśli wysokość nie jest jawnie zapewniona elementowi, którego elementy potomne są unoszone, to Element nadrzędny będzie się zmniejszał i wydawał się nie akceptować wymiarów elementu potomnego, również jeśli jego podane overflow:hidden; jego dzieci mogą nie być wyświetlane na ekranie. Istnieje wiele sposobów radzenia sobie z tym problemem:

1. Wstaw inny element pod pływającym elementem z właściwością clear:both;, lub użyć clear:both; na :after elementu pływającego.

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

Próbowałeś tradycyjnego sposobu? podaj wysokość głównego kontenera: auto

#container{height:auto}

Używałem tego i to działało większość razy ze mną.

W CSS: #clear_div{clear:both;}

Po znaczniku div wewnętrznego div dodaj ten nowy po div

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

Http://www.w3schools.com/cssref/pr_class_clear.asp : Więcej informacji

Dodałem Bootstrap do projektu z tagami section, które ustawiłem na 100% wysokości ekranu. Działał dobrze, dopóki nie uczyniłem projektu responsywnym, w którym to momencie pożyczyłem część jennyfofenny 's answer więc moje tło sekcji dopasowane tło treści, gdy rozmiar ekranu zmienił się na mniejszych ekranach.

Mój Nowy section CSS wygląda tak:

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

Powiedzmy, że masz sekcję, która ma określony kolor. Używając min-height, jeśli szerokość odcinka zmniejsza się z powodu mniejszego ekranu, wysokość sekcji zostanie rozszerzona, zawartość pozostanie w sekcji, a tło pozostanie pożądanym kolorem.

Wpadam na to w projekcie - miałem stół wewnątrz div, który wylewał się z dna div. Żadna z poprawek wysokości, które próbowałem, nie zadziałała, ale znalazłem dziwną poprawkę na to, a mianowicie umieszczenie akapitu na dole div z tylko kropką w nim. Następnie Ustaw "kolor" tekstu tak, aby był taki sam jak tło kontenera. Pracował schludnie, jak chcesz i nie wymaga javascript. Nietłukąca się przestrzeń nie zadziała , podobnie jak przezroczysty obraz.

Najwyraźniej po prostu trzeba było zobaczyć, że pod tabelą znajduje się jakaś treść, aby rozciągnąć ją, aby ją pomieścić. Zastanawiam się, czy to zadziała na kogoś innego.

To jest coś, co sprawia, że projektanci uciekają się do układów opartych na tabelach - ilość czasu, jaki spędziłem na wymyślaniu tych rzeczy i uczynieniu ich kompatybilnymi z przeglądarką, doprowadza mnie do szaleństwa.

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

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

Jeśli używasz jQuery UI, mają już klasę, która działa tylko urok dodaj <div> na dole wewnątrz div, który chcesz rozwinąć za pomocą 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ąć.

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

Zrobiłem skrzypce na podstawie kodu OP zamieszczonego tutaj: http://jsfiddle.net/U5x4T/1 / , gdy usuniesz i dodasz div wewnątrz, zauważysz, jak kontener rozszerza się lub zmniejsza rozmiar

Jedyne 2 rzeczy, których potrzebujesz, aby to osiągnąć, dodatkowe do kodu OP to:

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

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

Dodano display: inline do div I rosło automatycznie (nie przewijanie), gdy zawartość wysokości wzrosła wtedy ustawiona wysokość div 200px

Możesz użyć CSS Grid Layout . Wsparcie jest w tej chwili dość szerokie: sprawdź to na caniuse .

Oto przykład na jsfiddle. Również przykład {[4] } z tonami tekstu.

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

Próbowałem prawie wszystkich sugestii wymienionych powyżej i żadna z nich nie zadziałała. Jednak "display: table" zrobił dla mnie trick.

Nie trzeba używać dużo CSS, wystarczy użyć bootstrap, a następnie użyć:

class="container"

Dla div, który należy wypełnić.

Możesz pobrać bootstrap stąd