Pomoc w prostym CCS :) Stopka na dół, Marsz!

Question

<div> -> 100% wysokości

<div></div> X wysokości

<div></div> Y wysokości

<div></div> -> W jaki sposób zrobić aby wysokość tego diva dopełniała do 100% względem rodzica?

</div>

Lub w jaki sposób rozciągnąć stopkę na dół ale tak by nie zostało puste miejsce między stopką a elementem wyżej. (wyżej jest div z 3 divami pionowo -> flex)

Comments

wrzuć na codepen bo tak to można dyskutować, a czasami błąd może tkwić w zupełnie innym miejscu.

---

Nie ma błędu, chodzi mi o to, że przy małej ilości tekstu stopka jest na środku, a wszystkie sposoby jakie znalazłem powodowały przypinanie stopki na sztywno do dołu, wtedy powstaje puste miejsce - tło głównego kontenera.

https://codepen.io/anon/pen/bMEmba

Stopka ma iść na sam dół, a div z flexem ma się rozciągnąć.

Całość powinna być tyle samo co klasa html. Html oczywiście nie ma stałej wysokości.

Answer 1

Tutaj chyba spokojnie można wykorzystać flexa tylko mimo wszystko trzeba zmienić kierunek elementów na kolumny.

Podsyłam przykład, mam nadzieję, że widać, co tutaj się stanęło :D

Comments

Dobra, zrobiłem, musiałem kilka razy użyć tego flexa aby doprowadzić 100% height. Dziękuję za pomoc.

Jeszcze tylko pytanie: za co odpowiada druga jedynka: "flex: 1 1 100%"?