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 jak 1200px, to szerokość pojemnika pozostanie 1200px. Podobnie z szerokością minimalną - zmniejszaj szerość okna, zmiana szerokości pojemnika wystąpi do momentu, kiedy szerokość okna przeglądarki wyniesie 400px.
Aby dopasować wysokość pojemnika do okna przeglądarki określiliśmy height:100vh;. Zastosowaliśmy vh - viewport height - 1vh jest równy 1% wartości wysokości przestrzeni w jakiej została wyświetlona nasza strona (podobnie mamy jednsotkę szerokości vw - viewport width).
Elementy lewy, srodkowy oraz prawy, są dziećmi elementu pojemnik. Ich szerokości zostały określone procentowo - podczas zmiany szerokości pojemnika (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 rodzica pojemnik rozmiar czcionki font-size:10px;, to dla dziecka lewy rozmiar czcionki określony jako font-size:1.2em; wynosi 12px, ponieważ 10 x 1.2 = 12.
Szerokość naglowka oraz stopki wynosi 100% szerokości rodzica.
Wysokość elementów lewy, srodkowy oraz prawy jest wysokością okna pomniejszoną o sumę wysokości elementów naglowek i stopka, która wynosi 80px. 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 nas height:calc(100vh - 80px);. Znak działania musi być oddzielony znakami spacji.
Elementy lewy, srodkowy oraz prawy, są elementami pływającymi, dlatego dla kolejnego elementu stopka określamy clear:both;.
Przepełnienie overflow:hidden; zabobiega ewentualnemu pokazywaniu tekstu poza obszarem elementów.