web-dev-qa-db-fra.com

régler la hauteur de div en utilisant jQuery (stretch div height)

J'ai 3 divs avec les identifiants header, content et footer. L'en-tête et le pied de page ont une hauteur fixe et sont conçus pour flotter en haut et en bas. Je veux le milieu content hauteur calculée automatiquement avec jQuery. Comment puis-je rendre cela possible?

#header {
    height: 35px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
}
#footer {
    height: 35px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

Merci d'avance...:)

blasteralfred

jquerycsscss3
47
blasteralfred Ψ

bien tu peux faire ça:

$(function(){

    var $header = $('#header');
    var $footer = $('#footer');
    var $content = $('#content');
    var $window = $(window).on('resize', function(){
       var height = $(this).height() - $header.height() + $footer.height();
       $content.height(height);
    }).trigger('resize'); //on page load

});

voir le violon ici: http://jsfiddle.net/maniator/JVKbR/
démo: http://jsfiddle.net/maniator/JVKbR/show/

65
Neal

La bonne façon de faire est d'utiliser du bon vieux CSS:

#content{
    width:100%;
    position:absolute;
    top:35px;
    bottom:35px;
}

Et le bonus est que vous n'avez pas besoin d'attacher à l'événement window.onresize! Tout s'ajustera lorsque le document sera refait. Le tout pour le prix très bas de quatre lignes de CSS!

16
Shmiddty

Du haut de ma tête:

$('#content').height(
    $(window).height() - $('#header').height() - $('#footer').height()
);

Est-ce ce que vous voulez dire?

14
Zirak

Vous pouvez lier une fonction comme suit, au lieu d'init au chargement

$("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​
2
Amol M Kulkarni
$(document).ready(function(){ contsize();});
$(window).bind("resize",function(){contsize();});

function contsize()
{
var h = window.innerHeight;
var calculatecontsize = h - 70;/*if header and footer heights= 35 then total 70px*/ 
$('#content').css({"height":calculatecontsize + "px"} );
}
0
Murat Kezli