adapter la hauteur d'un élément html à la résolution de l'écran
Par llwynrt le jeudi, octobre 1 2015, 21:41 - Lien permanent
<script>
/**
* @author Marie-Lyse Briffaud
* @date 28/09/2015
* ajuste la hauteur de la page pour que le footer soit en bas de page si la hauteur du contenu est insuffisante
*/
/*on recalcule au chargement de la page et au redimensionnement de la fenêtre*/
window.onresize=AdapterDivAResolution;
window.onload=AdapterDivAResolution;
function AdapterDivAResolution() {
/*dimensions de la fenêtre*/
var x_res = window.innerWidth;
var y_res = window.innerHeight;
/*en dessous de 768px de large, l'affichage ne se fait plus sur 3 colonnes
inutile donc d'ajuster la hauteur*/
if(x_res>768){
var header = getHeight(document.getElementById('header'));
var footer = getHeight(document.getElementById('footer'));
var hauteurContenu = getHeight(document.getElementById('contenu'));
var hauteurCalcule = y_res - header - footer;
/*on ajuste la hauteur uniquement si le contenu est plus petit que la place disponible*/
if(hauteurContenu < hauteurCalcule) {
document.getElementById('contenu').style.height = hauteurCalcule + 'px';
}
}
}
function getHeight(obj){
if(obj.offsetHeight)
{return obj.offsetHeight;}
else if(obj.style.pixelHeight)
{return obj.style.pixelHeight;}
}
</script>