Patička vždy dole

14. prosince 2005

•

Toto řešení lze použít kdekoli, kde se předpokládá, že bude na stránce málo obsahu a nebude tedy stránka celá zaplněna.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Miloslav Lešetický. Bližší popis najdete v článku Patička webu vždy dole.

CSS

html, body
{
height: 100%;
padding: 0;
margin: 0;
}
body
{
_text-align: center; /* IE */
background: #FFF5E6;
}
h1
{
margin: 0;
text-align: center;
}
#stranka
{
width: 60%;
height: auto;
min-height: 100%;
_height: 100%; /* IE */
background: #FFE6BF;
text-align: justify;
margin: 0 auto;
position: relative;
border-right: solid #666 1px;
border-left: solid #666 1px;
}
#hlavicka
{
border-bottom: solid #666 1px;
background: #BF9960;
padding: 10px;
}
#paticka_matrjoska
{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
background: #BF9960;
}
#paticka
{
border-top: solid #666 1px;
text-align: right;
padding: 10px;
}
#hlavni
{
padding: 10px;
padding-bottom: 65px; /* vyska paticky */
}
#hlavni img
{
float: left;
border: solid #666 1px;
margin: 0 1em .5em 0;
}

XHTML

<html>
<body>
<div id=“stranka“>
<div id=“hlavicka“>
<h1>Lorem ipsum dolor sit amet…</h1>
</div>
<div id=“hlavni“>
<img src=“59-1.jpg“ alt=““ title=““/>
Sed adipiscing lacinia risus…
</div>
<div id=“paticka_matrjoska“>
<div id=“paticka“>
…consectetuer adipiscing elit.
</div>
</div>
</div>
</body>
</html>