Devo mettere un footer a piè di pagina e sto realizzando il layout con i css.
Il problema da risolvere è che questo footer deve stare a fondo pagina se i contenuti entrano nell'altezza del video, invece si deve spostare più in basso qualora i contenuti richiedessero uno scroll verticale.
In questo articolo http://www.html.it/layout_css/layout_css_15.htm
si realizza questo effetto sfruttando le regole position:absolute e position:relative su alcuni container.
Io invece ho fatto così:
codice:
html,body{margin: 0;padding:0;height:100%;}
#main
{
width:100%;
height:100%;
text-align:left;
}
#content
{
padding: 0 1.5em 5em;
}
#header
{
height:30px;
background-color:#999999;
}
#footer
{
background-color:#999999;
bottom:0;
width:100%;
height:30px;
}
Questo è il codice html
codice:
<body>
<div id="main">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
testato con ie6 e firefox 1.5 funziona correttamente anche quando il testo eccede l'altezza del video.
Dato che mi pare un procedimento molto più semplice e snello rispetto a quello presentato nell'articolo, mi è venuto il dubbio che ci possa essere qualche controindicazione o che possa aver trascurato qualche aspetto.
Che ne dite?