CSS-Expand float Child div height to parent ' s height

Powszechne rozwiązanie tego problemu wykorzystuje absolutne pozycjonowanie lub przycięte pływaki, ale są one trudne, ponieważ wymagają obszernego strojenia, jeśli kolumny zmieniają Rozmiar cyfry+, i że musisz upewnić się, że Twoja" główna " kolumna jest zawsze najdłuższa. Zamiast tego sugerowałbym użycie jednego z trzech bardziej solidnych rozwiązań:]}

1. display: flex: zdecydowanie najprostsze i najlepsze rozwiązanie i bardzo elastyczne-ale nieobsługiwane przez IE9 i starsze.
2. table lub display: table: bardzo proste, bardzo kompatybilny( prawie każda przeglądarka kiedykolwiek), dość elastyczny.
3. display: inline-block; width:50% z ujemnym marginesem hack: dość proste, ale granice od dołu kolumny są trochę trudne.

1. display:flex

Jest to naprawdę proste i łatwo jest dostosować się do bardziej złożonych lub bardziej szczegółowych układów - ale flexbox jest obsługiwany tylko przez IE10 lub nowszy (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>

odpowiedni css:

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

Flexbox obsługuje dużo więcej opcji, ale aby po prostu mieć dowolną liczbę kolumn wystarczy powyższe!

2.<table> lub display: table

Prostym i niezwykle kompatybilnym sposobem na to jest użycie table - polecam wypróbować to najpierw, jeśli potrzebujesz wsparcia old-IE . Masz do czynienia z kolumny; div + pływaki po prostu nie są najlepszym sposobem, aby to zrobić (nie wspominając o tym, że wiele poziomów zagnieżdżonych div po prostu włamać się wokół ograniczeń css jest prawie bardziej "semantyczne"niż po prostu za pomocą prostej tabeli). Jeśli nie chcesz używać elementu table, rozważ css display: table (nieobsługiwane przez IE7 i starsze).

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

odpowiedni html: (ale rozważ użycie zwykłego <table> zamiast)

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

odpowiedni 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 wytrzymałe niż stosowanie overflow:hidden z pływakami. Możesz dodać praktycznie dowolną liczbę kolumn; możesz je mieć auto-scale, jeśli chcesz; i zachowujesz zgodność z starożytnymi przeglądarkami. W przeciwieństwie do wymaganego rozwiązania float, nie musisz wcześniej wiedzieć , która kolumna jest najdłuższa; wysokość skaluje się dobrze.

KISS: nie używaj float hacki chyba, że trzeba. Jeśli IE7 jest problemem, nadal wybrałbym zwykłą tabelę z kolumnami semantycznymi zamiast trudnego do utrzymania, mniej elastycznego rozwiązania trick-CSS każdego dnia.

Nawiasem mówiąc, jeśli potrzebujesz, aby twój układ był responsywny (np. brak kolumn w małych telefonach komórkowych), możesz użyć zapytania @media, 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 dowolnego innego display: table elementu.

3. display:inline block z ujemnym marginesem hack.

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

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

odpowiedni html: (brak spacji pomiędzy znacznikami div jest znaczący!)

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

odpowiedni 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 skomplikowane, a ujemny margines oznacza, że "prawdziwe" dno kolumn jest zasłonięte. To z kolei oznacza, że nie możesz niczego pozycjonować w stosunku do dołu tych kolumn, bo to jest odcięte przez overflow: hidden. Zauważ, że oprócz bloków w linii, możesz osiągnąć podobny efekt za pomocą pływaków.

TL; DR: użyj flexbox jeśli możesz zignorować IE9 lub starsze; w przeciwnym razie spróbuj użyć tabeli (css). Jeśli żadna z tych opcji nie działa dla Ciebie, istnieją hacki ujemnych marginesów, ale mogą one powodować dziwne problemy z wyświetlaniem, które łatwo przegapić podczas tworzenia. świadomi.

Dla rodzica:

display: flex;

Dla Dzieci:

align-items: stretch;

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

Znalazłem wiele odpowiedzi, ale chyba 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ć parent div na overflow: hidden
następnie w divach dziecięcych można ustawić dużą ilość dla padding-bottom. na przykład
padding-bottom: 5000px
then margin-bottom: -5000px
i wtedy wszystkie dziecięce div będą wysokością rodzica.
Oczywiście to nie zadziała, jeśli próbujesz umieścić zawartość w nadrzędnym div (poza innymi divami, które są)

.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 ustawisz wysokość rodziców w ten sposób.

div.parent { height: 300px };

Wtedy możesz sprawić, że dziecko rozciągnie się na pełną wysokość w ten sposób.

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

EDIT

Oto jak można to zrobić 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ładała, że każda kolumna może być wyższa):

starasz się, aby wysokość rodzica zależy od wzrostu dzieci i wysokość dzieci zależy od wzrostu rodzica. Nie obliczy. CSS Faux columns 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ę, że height:100% zadziała, więc jeśli nie znasz div-ów, to nie sądzę, aby było czyste rozwiązanie CSS.

Użyłem tego do 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 unosić dziecko-prawo w prawo, ale w tym przypadku obliczyłem szerokość każdego div dokładnie.

Jeśli znasz bootstrap, możesz to zrobić łatwo, używając właściwości 'flex'.Wszystko, co musisz zrobić, to przekazać poniżej właściwości css do rodzica div

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

Gdzie .homepageSection jest mój rodzic div. Teraz dodaj child div w html jako

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

Gdzie abc jest moim dzieckiem div.Możesz sprawdzić równość wysokości w obu child div niezależnie od obramowania, podając obramowanie do child div

<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, aby dać pomysł.

Widzę, że przyjęta odpowiedź używa position: absolute; zamiast float: left. Jeśli chcesz użyć float: left o następującej strukturze,

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

Daj rodzicowi position: auto; tak, aby zawierał wzrost dzieci.

.parent {
    position: auto;
}
.floatLeft {
    float: left
}

Dowiedziałem się o tym na rozmowie kwalifikacyjnej. Pierwotne pytanie brzmi: jak upewnić się, że wysokość każdego górnego komponentu w trzech kolumnach ma tę samą wysokość, która pokazuje całą dostępną zawartość. Zasadniczo Utwórz niewidoczny komponent potomny, który renderuje maksymalną możliwą wysokość.

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