Dvojstĺpcový layout s pätou vždy dole

Niekedy z rôznych dôvodov (obsahu je príliš málo, a nevyzerá to dobre) obyčajný dvojstĺpcový layout nestačí. Je preto na mieste zabezpečiť, aby minimálna výška obsahovej časti bola vždy aspoň 100% veľká. Ako na to, si ukážeme a popíšeme v nasledujúcom príklade:

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="obal">
               <div id="stlpec">
                   <p>iné informácie</p>
               </div>
               <div id="obsah">
                   <h1>Webová stránka</h1>
                   <p>Obsah webovej stránky</p>
               </div>
               <div class="clear"></div>
               <div id="pata">
                   <p>&copy; Vaše meno</p>
               </div>
           </div>
    </body>
</html>
   

CSS bude vyzerať takto:

html, body {
    height: 100%;    /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/
}
body {
    margin: 0; /*vynuluje predvolený vonkajší okraj 8px*/
}
#obal {
    width: 960px;    /*určí šírku obaľovacieho prvku*/
    margin: 0 auto;    /*vycentruje*/
    min-height: 100%;    /*ak by ste použili height, obsah by pri stránke vyššej ako 100% vytiekol*/
    padding-bottom: 8em;    /*vytvorí miesto pre pätu*/
    position: relative;    /*zapezbečí možnosť poziciovať pätu vzhľadom na obaľovací prvok,
namiesto <body>*/
    background-color: #CCC;    /*slúži na viditeľnosť pri kontrole správnosti*/
}
#stlpec {
    float: right;    /*vlastnsoť float dovolí prvkom byť zoabrazené vedľa seba*/
    width: 240px;    /* určenie rozmerov*/
    min-height: 700px;    /*min-height kvôli neprečeteniu obsahu pri jeho väčšom množstve;
hodnota musí byť v pixeloch*/
    padding: 5px;
    background-color: rebeccapurple;    /*opäť kvôli viditaľnosti*/
}
#obsah {
    padding: 10px;
    margin-right: 250px;    /*vytvorí miesto pre stĺpec; v prípade,
že by bol zobrazený naľavo, použijeme vlastnsoť margin-left*/
}
.clear {
    clear: both;
}
#pata {
    width: 100%;    /*nastaví päte rozmery, ktoré deaktivovalo použitie absolútneho poziciovania*/
    position: absolute;   
    left: 0;
    bottom: 0;    /*zariadime, aby bola päta vždy dole vzhľadom na obaľovací prvok
(ktorý je vždy vysoký aspoň 100%) a nastavíme umiestnenie zľava a zdola*/
    text-align: center;
    border-top: 1px dotted #000;    /*viditeľnosť*/
}

Živá ukážka

Princípom jednostĺpcového layoutu je nastaviť obalu minimálnu výšku (min-height) 100% a pätu absolútne napoziciovať (position: absolute;) na dno stránky. Ak obalu neudáme vlastnosť position: relative päta sa bude poziciovať, ale vzhľadom na prvok <body>, nie obal.

Pri dvojstĺpcovom layoute ide o rovnaký princíp, ale obsahovú časť musíme rozdeliť. Požadovaný efekt by sa nám podarilo dosiahnuť, aj v prípade, že by sme nechali obtekať (pomocou float) obidva stĺpce… Nebolo by však možné vytvoriť aspoň sčasti responzívny dizajn (ak nie je float, môžeme použiť min-width a max-width).

Dúfam, že je článok pochopiteľný a pre mnohých z vás  aj poučný. Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.