CSS - Rozwiń pływającą wysokość DIV dziecka do wysokości rodzica

Mam strukturę strony jako:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Teraz child-leftDIV będzie zawierał więcej treści, więc parentwysokość DIV wzrasta zgodnie z DIV dziecka.

Problem w tym, że child-rightwysokość się nie zwiększa. Jak mogę wyrównać jego wysokość do jego rodzica?

Dla parentelementu dodaj następujące właściwości:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

następnie dla .child-righttych:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Znajdź bardziej szczegółowe wyniki z przykładami CSS tutaj i więcej informacji na temat kolumn o równej wysokości tutaj .

Wspólne rozwiązanie tego problemu wykorzystuje pozycjonowanie bezwzględne lub przycięte zmiennoprzecinkowe, ale są one trudne, ponieważ wymagają obszernego dostrajania, jeśli liczba kolumn zmienia się pod względem liczby i rozmiaru, i że musisz upewnić się, że kolumna „główna” jest zawsze najdłuższa. Zamiast tego sugeruję użycie jednego z trzech bardziej niezawodnych rozwiązań:

1. display: flex: zdecydowanie najprostsze i najlepsze rozwiązanie oraz bardzo elastyczne - ale nieobsługiwane przez IE9 i starsze.
2. tablelub display: table: bardzo prosty, bardzo kompatybilny (prawie każda przeglądarka kiedykolwiek), dość elastyczny.
3. display: inline-block; width:50% z hackowaniem marginesów ujemnych: dość proste, ale obramowanie dolnej kolumny jest trochę trudne.

1. display:flex

Jest to naprawdę proste i łatwe do dostosowania do bardziej złożonych lub bardziej szczegółowych układów - ale Flexbox jest obsługiwany tylko przez IE10 lub nowszą wersję (oprócz innych nowoczesnych przeglądarek).

Przykład: http://output.jsbin.com/hetunujuma/1

Odpowiedni HTML:

<div class="parent"><div>column 1</div><div>column 2</div></div>

Odpowiednie css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox obsługuje wiele innych opcji, ale wystarczy mieć dowolną liczbę kolumn, wystarczy powyższe!

2. <table>lubdisplay: table

Prostym i niezwykle kompatybilnym sposobem na wykonanie tego jest table- polecam najpierw spróbować, jeśli potrzebujesz obsługi starego IE . Masz do czynienia z kolumnami; divs + float po prostu nie jest najlepszym sposobem na zrobienie tego (nie wspominając o tym, że wiele poziomów zagnieżdżonych div tylko po to, by włamać się do ograniczeń css, nie jest bardziej „semantyczne” niż zwykła tabela). Jeśli nie chcesz używać tego tableelementu, rozważ cssdisplay: table (nieobsługiwany przez IE7 i starsze).

Przykład: http://jsfiddle.net/emn13/7FFp3/

Odpowiedni HTML: (ale<table>zamiast tegorozważ użycie zwykłego)

<div class="parent"><div>column 1</div><div>column 2</div></div>

Odpowiednie css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

To podejście jest znacznie bardziej niezawodne niż w overflow:hiddenprzypadku pływaków. Możesz dodać prawie dowolną liczbę kolumn; możesz je skalować automatycznie, jeśli chcesz; i zachowujesz zgodność ze starymi przeglądarkami. W przeciwieństwie do rozwiązania typu float, nie musisz wcześniej wiedzieć, która kolumna jest najdłuższa; wysokość dobrze się skaluje.

KISS: nie używaj haków pływakowych, chyba że potrzebujesz. Jeśli IE7 stanowi problem, nadal wybieram zwykłą tabelę z kolumnami semantycznymi zamiast trudnego w utrzymaniu, mniej elastycznego rozwiązania trick-CSS każdego dnia.

Nawiasem mówiąc, jeśli potrzebujesz, aby układ był responsywny (np. Brak kolumn na małych telefonach komórkowych), możesz użyć @mediazapytania, aby powrócić do zwykłego układu bloków dla małych szerokości ekranu - działa to niezależnie od tego, czy używasz, <table>czy innego display: tableelementu.

3. display:inline blockz ujemnym włamaniem do marginesu.

Inną alternatywą jest użycie display:inline block.

Przykład: http://jsbin.com/ovuqes/2/edit

Odpowiedni html: (brak spacji międzydivznacznikami jest znaczący!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

Odpowiednie css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Jest to nieco trudne, a ujemny margines oznacza, że ​​„prawdziwy” dół kolumn jest zasłonięty. To z kolei oznacza, że ​​nie możesz ustawić niczego względem dołu tych kolumn, ponieważ jest to odcięte overflow: hidden. Pamiętaj, że oprócz bloków wbudowanych możesz osiągnąć podobny efekt za pomocą pływaków.

TL; DR : użyj Flexboksa, jeśli możesz zignorować IE9 i starsze; w przeciwnym razie wypróbuj tabelę (css). Jeśli żadna z tych opcji nie jest dla ciebie odpowiednia, występują hacki o ujemnym marginesie, ale mogą powodować dziwne problemy z wyświetlaniem, których łatwo przeoczyć podczas programowania, i istnieją ograniczenia dotyczące układu, o których musisz pamiętać.

Dla rodzica:

display: flex;

Dla dzieci:

align-items: stretch;

Powinieneś dodać kilka prefiksów, sprawdź caniuse.

Znalazłem wiele odpowiedzi, ale prawdopodobnie najlepszym rozwiązaniem dla mnie jest

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Możesz sprawdzić inne rozwiązania tutaj http://css-tricks.com/fluid-width-equal-height-columns/

Proszę ustawić div div, aby overflow: hidden
w divach potomnych można było ustawić dużą ilość dla padding-bottom. na przykład
padding-bottom: 5000px
wtedy margin-bottom: -5000px
i wtedy wszystkie div div dziecka będą wysokością rodzica.
Oczywiście to nie zadziała, jeśli próbujesz wstawić treść do nadrzędnego div (poza innymi div div)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Przykład: http://jsfiddle.net/Tareqdhk/DAFEC/

Czy rodzic ma wzrost? Jeśli tak ustawisz wysokość rodziców.

div.parent { height: 300px };

Następnie możesz sprawić, by dziecko rozciągało się na pełną wysokość w ten sposób.

div.child-right { height: 100% };

EDYTOWAĆ

Oto, jak zrobiłbyś to za pomocą JavaScript.

Wyświetlanie tabeli CSS jest idealne do tego:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Oryginalna odpowiedź (zakładając, że dowolna kolumna może być wyższa):

Próbujesz uzależnić wzrost rodzica od wzrostu dziecka, a wzrost dziecka od wzrostu rodzica. Nie da się obliczyć. Sztuczne kolumny CSS to najlepsze rozwiązanie. Jest na to więcej niż jeden sposób. Wolałbym nie używać JavaScript.

Ostatnio zrobiłem to na mojej stronie przy użyciu jQuery. Kod oblicza wysokość najwyższego div i ustawia pozostałe div na tę samą wysokość. Oto technika:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Nie wierzę, height:100%że zadziała, więc jeśli nie znasz wyraźnie wysokości podziałów, nie sądzę, że istnieje czyste rozwiązanie CSS.

Użyłem tego w sekcji komentarzy:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Możesz przesunąć dziecko w prawo, ale w tym przypadku dokładnie obliczyłem szerokość każdego diva.

Jeśli znasz bootstrap, możesz to łatwo zrobić za pomocą właściwości „flex”. Wystarczy, że podasz właściwości css do rodzica div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

gdzie .homepageSectionjest mój rodzic div. Teraz dodaj div div w swoim HTML jako

<div class="abc col-md-6">
<div class="abc col-md-6">

gdzie abc jest moim div dziecka. Możesz sprawdzić równość wysokości w obu div dziecka, niezależnie od granicy, po prostu nadając granicy div dziecka

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Użyłem stylu inline tylko po to, aby dać pomysł.

Dowiedziałem się o tej zgrabnej sztuczce podczas rozmowy o staż. Pierwotne pytanie brzmi: w jaki sposób zapewnić wysokość każdego górnego komponentu w trzech kolumnach o tej samej wysokości, która pokazuje całą dostępną zawartość. Zasadniczo utwórz niewidoczny komponent podrzędny, który renderuje maksymalną możliwą wysokość.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>