ubuntu

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - javascript

Fil des billets

jeudi, octobre 1 2015

adapter la hauteur d'un élément html à la résolution de l'écran

<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>