Spraw, aby div (wysokość) zajmował pozostałą wysokość rodzica

http://jsfiddle.net/S8g4E/

Mam pojemnik divz dwójką dzieci. Pierwsze dziecko ma określony wzrost. Jak sprawić, aby drugie dziecko zajmowało „wolną przestrzeń” pojemnika divbez podawania określonej wysokości?

W tym przykładzie różowy divpowinien zajmować również białą przestrzeń.

Podobne do tego pytania: jak sprawić, by div zajmował pozostałą wysokość?

Ale nie chcę podawać pozycji absolutnej .

Rozszerzanie #downdziecka, aby wypełnić pozostałą przestrzeń, #containermożna osiągnąć na różne sposoby, w zależności od obsługi przeglądarki, którą chcesz osiągnąć i od tego, czy #upma określoną wysokość, czy nie .

Próbki

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Krata

gridUkład CSS oferuje jeszcze jedną opcję, chociaż może nie być tak prosta jak model Flexbox. Jednak wymaga tylko stylizacji elementu kontenera:

.container { display: grid; grid-template-rows: 100px }

Plik grid-template-rowsWyznacza pierwszy wiersz w postaci stałej 100px wysokości i pozostają rzędy rozciągają się automatycznie wypełniając pozostałą przestrzeń.

Jestem prawie pewien, że IE11 wymaga -ms-prefiksów, więc upewnij się, że sprawdziłeś funkcjonalność w przeglądarkach, które chcesz obsługiwać.

Flexbox

Modułflexbox CSS3 Flexible Box Layout Module ( ) jest teraz dobrze obsługiwany i może być bardzo łatwy do wdrożenia. Ponieważ jest elastyczny, działa nawet wtedy, gdy #upnie ma określonej wysokości.

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

Ważne jest, aby pamiętać, że obsługa IE10 i IE11 dla niektórych właściwości flexboksa może być wadliwa, a IE9 lub starsze nie mają żadnej obsługi.

Obliczona wysokość

Innym łatwym rozwiązaniem jest użycie jednostki funkcjonalnej CSS3calc , jak wskazuje Alvaro w swojej odpowiedzi , ale wymaga, aby wzrost pierwszego dziecka był znaną wartością:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

Jest dość szeroko obsługiwany, z jedynymi godnymi uwagi wyjątkami: <= IE8 lub Safari 5 (brak wsparcia) i IE9 (częściowe wsparcie). Niektóre inne problemy obejmują używanie programu calc w połączeniu z transform lub box-shadow , więc jeśli Cię to niepokoi, upewnij się, że wykonałeś test w wielu przeglądarkach.

Inne alternatywy

Jeśli potrzebne jest wsparcie starszych, można dodać height:100%;do #downuczyni różową div pełnej wysokości, z jednym zastrzeżeniem. Spowoduje to przepełnienie pojemnika, ponieważ #uppopycha go w dół.

Dlatego możesz dodać overflow: hidden;do kontenera, aby to naprawić.

Alternatywnie, jeśli wysokość #upjest stała, możesz umieścić ją całkowicie w pojemniku i dodać wyściółkę do #down.

A jeszcze inną opcją byłoby użycie wyświetlacza tabeli:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Minęły prawie dwa lata, odkąd zadałem to pytanie. Właśnie wymyśliłem css calc (), które rozwiązuje ten problem, który miałem i pomyślałem, że byłoby miło dodać go na wypadek, gdyby ktoś miał ten sam problem. (Nawiasem mówiąc, ostatecznie użyłem pozycji bezwzględnej).

http://jsfiddle.net/S8g4E/955/

Oto plik css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

Więcej informacji na ten temat znajdziesz tutaj: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Obsługa przeglądarek: http://caniuse.com/#feat=calc

Moja odpowiedź używa tylko CSS i nie używa overflow: hidden ani display: table-row. Wymaga to, aby pierwsze dziecko naprawdę miało określony wzrost, ale w swoim pytaniu stwierdzasz, że tylko drugie dziecko musi mieć nieokreślony wzrost, więc uważam, że powinieneś to zaakceptować.

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Abstrakcyjny

Nie znalazłem w pełni satysfakcjonującej odpowiedzi, więc musiałem sam się tego dowiedzieć.

Moje wymagania:

• element powinien zajmować dokładnie pozostałą przestrzeń, albo gdy rozmiar jego zawartości jest mniejszy lub większy niż pozostały rozmiar przestrzeni (w drugim przypadku powinien być pokazany pasek przewijania );
• rozwiązanie powinno działać, gdy wysokość rodzica jest obliczana , a nie określona ;
• calc()nie należy używać, ponieważ pozostały element nie powinien nic wiedzieć o innych rozmiarach elementów;
• Należy stosować nowoczesne i znane techniki projektowania, takie jak flexboxy .

Rozwiązanie

• Zamień na flexboxy wszystkich bezpośrednich rodziców z obliczoną wysokością (jeśli istnieją) i następnego rodzica, którego wysokość jest określona ;
• Określ flex-grow: 1dla wszystkich bezpośrednich rodziców z wyliczoną wysokością (jeśli istnieje) i elementem aby zajmowały całą pozostałą przestrzeń, gdy rozmiar zawartości elementu jest mniejszy;
• Określ flex-shrink: 0dla wszystkich elementów elastycznych o stałej wysokości aby nie zmniejszyły się, gdy rozmiar zawartości elementu jest większy niż pozostały rozmiar przestrzeni;
• Określ overflow: hiddendla wszystkich bezpośrednich rodziców z obliczoną wysokością (jeśli istnieje), aby wyłączyć przewijanie i zabronić wyświetlania zawartości przepełnienia;
• Określ overflow: autodo elementu , aby umożliwić przewijanie wewnątrz niego.

JSFiddle (element ma bezpośrednich rodziców z wyliczoną wysokością)

JSFiddle (prosty przypadek: brak bezpośrednich rodziców z obliczoną wysokością)

sprawdź demo - http://jsfiddle.net/S8g4E/6/

użyj css -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Chyba że się nie rozumiem, możesz po prostu dodać height: 100%;i overflow:hidden;do #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

DEMO na żywo

Edycja: ponieważ nie chcesz używać overflow:hidden;, możesz użyć display: table;w tym scenariuszu; jednak nie jest obsługiwany przed IE 8. ( display: table;wsparcie )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

DEMO na żywo

Uwaga: Powiedziałeś, że chcesz, aby #downwysokość była równa #containerwysokości minus #upwysokość. display:table;Rozwiązanie robi dokładnie to i to jsfiddle wcieli że dość wyraźnie.

Możesz używać pływaków do wypychania zawartości w dół:

http://jsfiddle.net/S8g4E/5/

Masz kontener o stałym rozmiarze:

#container {
    width: 300px; height: 300px;
}

Treść może przepływać obok pływaka. O ile nie ustawimy pływaka na pełną szerokość:

#up {
    float: left;
    width: 100%;
}

Podczas gdy #upi #downudostępnij najwyższą pozycję, #downzawartość może zaczynać się tylko po dolnej części pływającej #up:

#down {
    height:100%;
}​

Nie jestem pewien, czy można to zrobić wyłącznie za pomocą CSS, chyba że czujesz się komfortowo w udawaniu iluzji. Może używać odpowiedź Josh mein, a zestaw #containerdooverflow:hidden .

Oto rozwiązanie jQuery:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);