HTML & CSS

Cum se poate avea footer fix

cod-cssDacă site-ul necesită un footer fix, din start trebuie gândită întreaga structura asfel încât să existe două mari părți alte structurii html, adică două divuri: un div va conține footer-ul iar celălalt div va conține tot ce este deasupra footer-ului.

O observație: footerul fix poate fi fix relativ la ecran, caz în care va fi în permanență în partea de jos a ecranului, evident suprapunându-se peste texte sau footerul va fi fix relativ la conținut, astfel dacă conținutul ocupă o mică parte din ecran footerul va fi în partea de jos vizibil, dacă conținutul se întinde pe mai multe ecrane, footerul va fi în partea de jos, așa cum și este de obicei. E importantă această distincție.

Primul caz: footer aliniat jos vizibil în permanență:

<style type="text/css">
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* Pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
</style>
<script type="text/javascript">
function setnewcontentheight(){
	$("#inhalt").height(Math.max($(window).height()-$("#footer").height(),$('#inhalt').height()));
}

$(window).resize(function(){
	setnewcontentheight();
});

$(document).ready(function() {
	setnewcontentheight();
});
</script>

Același caz fără JavaScript, doar CSS:

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Al doilea caz: footer în permanență în josul conținutului

*{margin:0;}
html, body {
	height: 100%;
}
#inhalt {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}
#footer, #clearfooter {
	height: 30px;
}
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>

Sursa: flashjunior.ch/school

Tags: ,

2 Comentarii

  1. Nu imi este foarte clar articolul:

    – In primul rand nu ai explicat ce inseamna footer fix, ca sa stiu scopul pe care il urmaresc scripturile.
    – Ce inseamna continut care se intinde pe mai multe ecrane?

  2. Da, cred că am fost un pic cam criptic. Nu cu intenție 🙂

    Footer-ul este partea de jos a site-ului. În WordPress există un fișier numit footer.php în care se poate sau nu să să găsească id-ul footer. De acest ID m-am legat ca să fac footer-ul fix. Acum, footer fix însemnă ca, partea de jos: meniuri, texte și ce o mai fi, să rămână în permanență, fie vizibil peste texte, fie în partea de jos chiar dacă textul nu ocupă tot ecranul.

    Ceea ce am numit ecran sau un ecran este ceea ce vezi din site fără să derulezi mai jos. Ca atunci când site-ul se întinde de sus până jos fără bară de scroll vertical. Dacă derulezi și conținutul continuă ai mai multe ecrane. Ecranul depinde de rezoluția monitorului.

    Un exemplu de footer fix la conținut este la facebook unde dacă derulezi apar mai multe discuții. Meniul de jos va fi accesibil doar atunci când ai parcurs toate discuțiile.

Scrie un comentariu sau pune o intrebare

Your email address will not be published. Required fields are marked *

*