Płynny szablon liquid layout
Zadanie jest następujące: należy zbudować taki układ elementów, aby strona dostosowywała się do rozmiarów okna przeglądarki. Mówiąc o oknie przeglądarki, mamy na myśli tak zwany viewport - obszar przeglądarki przeznaczony na rendering strony WWW. Bez względu na stosowany monitor oraz rozdzielczość strona ma wypełnić okno przeglądarki. Z zajmowaniem całego obszaru monitora należy jednak być ostrożnym, ponieważ dzisiaj mamy kolosalne różnice w ich wielkości - od smartfonów, do wielkich monitorów panoramicznych. W wysokością strony nie ma problemów, ponieważ zazwyczaj jest ona większa od wysokości okna (w pokazanym przykładzie wysokość dostosowuje się do wysokokości okna), natomiast zakres szerokości możemy ograniczyć określając właściwości width-min
, oraz width-max
, czyli minimalną i maksymalną dopuszczalną szerokość strony).
Utworzyć płynny szablon strony - ćwiczenie 4_1_0_1
Style zdefiniujemy w arkuszu wewnętrznym style.css
, plik nazwijmy plynny_szablon.html
.
Plik style.css
body
{
margin:0;
padding:0;
}
p
{
padding:10px;
margin-top:0;
text-align:justify;
}
div.pojemnik
{
margin:auto;
background-color:silver;
width:100%;
height:100vh;
font-family:Arial,sans-serif;
font-size:10px;
color:white;
min-width:400px;
max-width:1200px;
}
div.pojemnik > div.naglowek, div.pojemnik > div.stopka
{
width:100%;
height:40px;
line-height:40px;
background-color:maroon;
text-align:center;
font-size:1.6em;
}
div.pojemnik > div.stopka
{
clear:both;
}
div.pojemnik > div.lewy
{
width:30%;
height:calc(100vh - 80px);
float:left;
background-color:gold;
color:black;
font-size:1.2em;
overflow:hidden;
}
div.pojemnik > div.srodkowy
{
width:50%;
height:calc(100vh - 80px);
float:left;
background-color:gray;
font-size:1.7em;
overflow:hidden;
}
div.pojemnik > div.prawy
{
width:20%;
height:calc(100vh - 80px);
float:left;
background-color:green;
font-size:1.2em;
overflow:hidden;
}
Plik plynny_szablon.html
.
<!doctype html>
<html>
<head>
<title>Płynny szablon liquid layout</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pojemnik">
<div class="naglowek">
Nagłówek
</div>
<div class="lewy">
<p>
Lorem ipsum...
</p>
<p>
Nam congue...
</div>
<div class="srodkowy">
<p>
Lorem ipsum...
</p>
</div>
<div class="prawy">
<p>
Lorem ipsum...
</p>
</div>
<div class="stopka">
Stopka
</div>
</div>
</body>
</html>
Na podstawie pokazanej wyżej ramki z naszą stroną nie można sprawdzić właściwości strony. Należy otworzyć plynny_szablon.html
i za pomocą myszki zmieniać rozmiary okna przeglądarki.
-
Elementy naszej strony umieściliśmy w
pojemniku
, dostostosowującym się do okna przeglądarki. Sprawdź to, zmieniając rozmiar okna przeglądarki - rozmiary elementów, będą się płynnie dostosywawać do rozmiarów okna przeglądarki. -
Ustalamy maksymalną dopuszczalną szerokość
max-width:1200px;
oraz szerokość minimalnąmin-width:400px;
pojemnika. Inaczej mówiąc strona dopasuje się do szerokości przeglądarki, jeżeli jednak okno będzie szersze jak1200px
, to szerokość pojemnika pozostanie1200px
. Podobnie z szerokością minimalną - zmniejszaj szerość okna, zmiana szerokości pojemnika wystąpi do momentu, kiedy szerokość okna przeglądarki wyniesie400px
. -
Aby dopasować wysokość pojemnika do okna przeglądarki określiliśmy
height:100vh;
. Zastosowaliśmyvh
- viewport height - 1vh jest równy 1% wartości wysokości przestrzeni w jakiej została wyświetlona nasza strona (podobnie mamy jednsotkę szerokościvw
- viewport width). -
Elementy
lewy
,srodkowy
orazprawy
, są dziećmi elementupojemnik
. Ich szerokości zostały określone procentowo - podczas zmiany szerokościpojemnika
(rodzica) zostają zachowane proporcje ich szerokości, ich szerokości stanowią bowiem określony procent szerokości rodzica. -
Fakt zależności rodzic > dziecko, wykorzystujemy także określając rozmiar czcionki w jednostkach
em
. Wartość1em
jest równa wartości czcionki tekstu jaką posiada rodzic danego elementu HTML. Jeżeli dla rodzicapojemnik
rozmiar czcionkifont-size:10px;
, to dla dzieckalewy
rozmiar czcionki określony jakofont-size:1.2em;
wynosi12px
, ponieważ 10 x 1.2 = 12. -
Szerokość
naglowka
orazstopki
wynosi100%
szerokości rodzica. -
Wysokość elementów
lewy
,srodkowy
orazprawy
jest wysokością okna pomniejszoną o sumę wysokości elementównaglowek
istopka
, która wynosi80px
. Podczas określenia tych wysokości musimy więc wykonać działanie arytmetyczne, które jest możliwe dzięki wprowadzeniu w CSS3 możliwości stosowania funkcji. W naszym przykładzie stosujemy funkcjęcalc()
, w której jako argument występuje określone działanie arytmetyczne - u nasheight:calc(100vh - 80px);
. Znak działania musi być oddzielony znakami spacji. -
Elementy
lewy
,srodkowy
orazprawy
, są elementami pływającymi, dlatego dla kolejnego elementustopka
określamyclear:both;
. -
Przepełnienie
overflow:hidden;
zabobiega ewentualnemu pokazywaniu tekstu poza obszarem elementów.