Patička vždy dole
14. 12. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Malware: android pod palbou, mobily v ohrožení?
- Pozvánka na Microsoft TechDays 2012
- Reklamní slepota: co to je a jak s ní bojovat?
- Pět důvodů, proč vybrat redakční systém Drupal
- Čeština pro WordPress 3.3.1 k dispozici
Tematicky související články
- Simulace rámců
- Mapa webu
- Horizontální ZDnet menu
- Dvousloupcový layout s plovoucí šířkou obou panelů
- Dvousloupcový layout s pevnou šířkou
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
