Czy wie ktoś jak zrobić takie coś:
Mamy jednego div'a który ma szerokość 100% i wysokość 100%;
Następnie w nim mamy 3 divy. Pierwszy przyklejony jest do góry w którym jest tylko jedna linia tekstu, drugi zaraz pod nim w nim także jest jedna linia tekstu.
Trzeci div jest pod nimi i wypełnia całą pozostałą powierzchnię, jego wysokość jest dynamiczna. Tekst jest wieloliniowy. Jego tekst wyrównany jest w pionie na środku (vertical-align: middle). Zamiast tych trzech divów może być tabela. Czy w ogóle da się to zrobić bez obliczania w js wysokości trzeciego diva i ustawiania jego wysokości ręcznie? Zrobiłem jakiś szkielet ale tekst w trzecim divie był trochę obniżony.
0
1
Coś takiego?
html
<div class="main">
<div class="first">
text
</div>
<div class="second">
text2
</div>
<div class="third">
text3
text3
</div>
</div>
css
.main {
height: 200px;
display: grid;
grid-template-rows: auto auto 1fr;
}
.first { background-color: red; }
.second { background-color: blue; }
.third {
background-color: green;
display: flex;
align-items: center;
}
0
@m31: Zauważyłem jeszcze mały problem. Tekst w trzeciej kolumnie na samym dole jest wyrównany do lewej strony. Jak mogę go wyśrodkować? text-align: center; nic nie pomaga... A nawet jeśli u mnie wyśrodkowało mi tekst to był wyśrodkowany ale wyrównany do lewej. Tak jakby trzeci wiersz podzielony był na niewidoczne kolumny.. Jak można go rozciągnąć na 100% strony? Mam ustawione width: 100%.