Rozwijanie elementu nadrzędnego <div> do wysokości jego elementów podrzędnych

308

Mam strukturę strony podobną do tej:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Ja jak dla związku macierzystego divrozwijać się w heightkiedy wewnętrzna div„S heightwzrasta.

Edycja:
Jednym z problemów jest to, że jeśli widthzawartość potomna rozszerza się poza widthokno przeglądarki, mój obecny CSS umieszcza poziomy pasek przewijania nadrzędny div. Chciałbym, aby pasek przewijania znajdował się na poziomie strony. Obecnie mój div div jest ustawiony naoverflow: auto;

Czy możesz mi w tym pomóc CSS?

html css Steve Horn
źródło
6
Czy unosisz wewnętrzne divy? Czy możesz opublikować obecny CSS?
Eric
2
@Eric - to też był mój problem - moje divy dziecka miały pływak: w lewo, kiedy go usunąłem, „rodzic” został automatycznie rozpoznany i rozciągnięty na pełną wysokość!
Michael Goltsman

Odpowiedzi:

539

Spróbuj tego dla rodzica, to zadziałało dla mnie.

overflow:auto;

AKTUALIZACJA:

Jeszcze jedno rozwiązanie, które zadziałało:

Rodzic :

display: table;

Dziecko :

display: table-row;
Dr Casper Black
źródło
67
overflow:autooznacza, że ​​przeglądarka powinna zdecydować, którą wartość zastosować. Czym tak naprawdę jest ta sztuczka overflow: overlay.
Alba Mendez,
14
@jmendeth Wartość przepełnienia zwana „nakładką” nie istnieje. To, co działa, jeśli divy potomne są zmienne, to deklarowanie overflow:hidden.
Christoph
16
Waaaait. Zrelaksować się. Jedną rzeczą jest twierdzenie, że overlaynie jest obsługiwane poza Webkit. Innym całkowicie innym jest stwierdzenie, że wcale nie istnieje. Proszę najpierw RTFM . ;)
Alba Mendez,
6
Jeśli jest tylko na Webkit, to istnieje tylko 20%: P Pozdrawiam, nigdy nie widziałem tej strony. Czy jest dobrze utrzymany i aktualizowany? Czy przysięgasz na to?
pilau
20
Alternatywną odpowiedzią jest stackoverflow.com/questions/450903/... i proponuje ustawienie display:inline-block. Który działał dla mnie świetnie.
Jens
26

dodaj clear:both. zakładając, że kolumny są zmiennoprzecinkowe. W zależności od tego, jak określony jest wzrost, rodzic może wymagać przelewu: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
bendewey
źródło
Dzięki temu uzyskuję poziomy pasek przewijania na rodzicielskim div, gdy zawartość jest szersza niż okno przeglądarki. Chciałbym, aby przewijanie w poziomie znajdowało się na całej stronie.
Steve Horn
1
Dlaczego potrzebujesz przelewu: auto ;? W moim teście jasne: oba; wystarczyło.
Paolo Bergantino,
3
Zakłada się również, że rodzic nie ma określonej wysokości.
bendewey,
To podejście działa dobrze w przeglądarce Firefox, ale nie działa w przeglądarce IE 6. Jakieś obejścia?
Steve Horn,
16

Jak powiedział Jens w komentarzu

Alternatywną odpowiedzią jest Jak zrobić div nie większy niż jego zawartość? … I proponuje ustawienie display: inline-block. Który działał dla mnie świetnie. - Jens 2 czerwca o 5:41

Działa to dla mnie znacznie lepiej we wszystkich przeglądarkach.

głośny
źródło
13

Spróbuj dać max-content wzrost rodzica.

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

Skotee
źródło
Jak ta właściwość zachowuje się w przypadku innych przeglądarek? W MDN: developer.mozilla.org/en-US/docs/Web/CSS/…
Robert Molina
Wydawało się, że to jedyna rzecz, która rozwiązała problem w Safari 12.
Ben Wheeler,
taka niesamowita wartość css! nieobsługiwane w Edge ¯_ (ツ) _ / ¯
Samer Murad
4

Dla tych, którzy nie mogą zrozumieć tego w instrukcjach z tej odpowiedzi tam:

Spróbuj ustawić wartość dopełniania większą niż 0 , jeśli div div dziecka ma margines górny lub margines dolny, możesz zastąpić go dopełnieniem

Na przykład jeśli masz

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

lepiej będzie zastąpić go:

#parent
{
    padding: 30px 0px 20px 0px;
}
imy
źródło
4

Korzystanie coś takiego automatycznego czyszczenia divjest idealny do sytuacji takiej jak ta . Następnie użyjesz klasy nadrzędnej ... jak:

<div id="parent" class="clearfix">
Tim Knight
źródło
3

Dodaj 

clear:both;

Do css div rodzica lub dodaj div u dołu rodzica div, który wyczyści: oba;

To poprawna odpowiedź, ponieważ przepełnienie: auto; może działać w przypadku prostych układów internetowych, ale będzie bałaganować elementy, które zaczynają używać takich rzeczy, jak ujemny margines itp

Boise marketingu internetowego
źródło
2

Czy to robi co chcesz?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
Eric
źródło
1

Zrobiłem, że div nadrzędny rozszerza się wokół zawartości div div, ponieważ div div jako pojedynczą kolumnę, która nie ma żadnego atrybutu pozycjonowania, takiego jak wartość bezwzględna.

Przykład:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Oparty na tym, że div kolumny głównej jest najgłębszym div div dziecka #wrap, określa głębokość div div #wrap, a wypełnienie 200 pikseli po obu stronach tworzy dwie duże puste kolumny, w których możesz umieścić absolutnie pozycjonowane divy, jak chcesz. Można nawet zmienić górną i dolną część wypełnienia, aby wstawić div nagłówka i div stopki, używając position: Absolut.

Ian
źródło
0

Musisz zastosować rozwiązanie clearfix na kontenerze nadrzędnym. Oto fajny artykuł wyjaśniający link do naprawy

Nikhil
źródło
0

Jeśli Twoje treści w #childRightCol i #childRightCol są ułożone w lewo lub w prawo, po prostu dodaj to do css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
użytkownik3436572
źródło
0

Działa to zgodnie z opisem w specyfikacji - kilka odpowiedzi tutaj jest poprawnych i spójnych z następującymi:

Jeśli ma elementy potomne na poziomie bloku, wysokość to odległość między górną krawędzią skrajnego najwyższego pudełka potomnego na poziomie bloku, który nie ma zawiniętych marginesów, a dolną krawędzią najniższego pudełka potomnego na poziomie bloku który nie ma załamanych marginesów. Jeśli jednak element ma niezerowe górne dopełnienie i / lub górną ramkę lub jest elementem głównym, zawartość zaczyna się od górnej krawędzi marginesu najwyższego elementu potomnego. (Pierwszy przypadek wyraża fakt, że górne i dolne marginesy elementu zapadają się z marginesami najwyższych i najniższych dzieci, podczas gdy w drugim przypadku obecność wypełnienia / granicy zapobiega zapadaniu się górnych marginesów.) Podobnie, jeśli element ma niezerowe dolne wypełnienie i / lub dolną ramkę, a następnie zawartość kończy się na dolnej krawędzi marginesu najniższego elementu potomnego.

stąd: https://www.w3.org/TR/css3-box/#blockwidth

Adam Tolley
źródło
0

Poniższy kod działał dla mnie.

css

.parent{
    overflow: auto;
}

HTML

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
anjaneyulubatta505
źródło
0 

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}
Rozwiń fragment kodu

YourBestBet
źródło
0

Od czego zaczynamy

Oto niektóre podstawowe HTML i CSS. W naszym przykładzie mamy element nadrzędny z dwoma zmiennoprzecinkowymi elementami potomnymi.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Rozwiń fragment kodu

Rozwiązanie nr 1: Przepełnienie: automatyczne

Rozwiązaniem, które działa we wszystkich nowoczesnych przeglądarkach i Internet Explorerze z powrotem do IE8, jest dodanie overflow: autodo elementu nadrzędnego. Działa to również w IE7 z dodanymi paskami przewijania.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Rozwiń fragment kodu

Rozwiązanie nr 2: Float Parent Container

Innym rozwiązaniem, które działa we wszystkich nowoczesnych przeglądarkach i wraca do IE7, jest przeniesienie kontenera nadrzędnego.

Nie zawsze może to być praktyczne, ponieważ przeniesienie div rodzica może wpływać na inne części układu strony.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Rozwiń fragment kodu

Metoda nr 3: Dodaj Dywan Oczyszczający Poniżej Elementów Pływających

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
Rozwiń fragment kodu

Metoda nr 4: Dodaj element Clearing Div do elementu nadrzędnego To rozwiązanie jest dość kuloodporne w przypadku starszych i nowszych przeglądarek.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Rozwiń fragment kodu

od https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

jafar690
źródło
-1

Używam tego CSS do nadrzędnego i działa:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
pejman
źródło
2
Używasz minimalnej wysokości, więc się nie liczy;)
pilau,
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
Rozwiń fragment kodu

jesteś zarządzany za pomocą overflow:hidden;właściwości w css

chintan kotadiya
źródło