web-dev-qa-db-fra.com

JQuery: hauteur dynamique () avec la fenêtre redimensionner ()

J'ai un problème identique à celui de cette affiche: Jquery problem with height () and resize ()

Mais la solution ne résout pas mon problème. J'ai trois div empilés, et je veux utiliser JQuery pour que celui du milieu s'ajuste à 100% de la hauteur de la fenêtre, moins la hauteur (23px * 2) des autres div haut et bas. Cela fonctionne sur le redimensionnement, mais il est désactivé (court) de 16 pixels lors du chargement initial du document.

HTML

<body>
<div id="bg1" class="bg">top</div>
<div id="content">
    help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>

CSS

html,
body {
    width:100%;
    height:100%;
}

.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}

#content {
width:450px; 
margin:0 auto;
text-align: center;
}

JQuery

$(document).ready(function(){
    resizeContent();

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

function resizeContent() {
    $height = $(window).height() - 46;
    $('body div#content').height($height);
}
jqueryhtmlcss
22
Gregir

Je pense qu'il devrait y avoir une solution sans javascript, mais comment est-ce

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');
53
mrtsherman

Ok, que diriez-vous d'une réponse CSS! Nous utilisons display: table. Ensuite, chaque div est une ligne, et finalement nous appliquons une hauteur de 100% à la "ligne" du milieu et le tour est joué.

http://jsfiddle.net/NfmX3/3/

body { display: table; }
div { display: table-row; }
#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    background-color: blue;
    color: white;
    height: 100%;
}
6
mrtsherman

La solution la plus propre - également purement CSS - consisterait en calc et vh.

La hauteur de la division moyenne sera calculée de la sorte:

#middle-div { 
height: calc(100vh - 46px); 
}

Autrement dit, 100% de la hauteur de la fenêtre, moins le 2 * 23px . Cela garantira que la page se charge correctement et est dynamique (démonstration ici) .

Pensez également à utiliser la taille de la boîte, afin que les rembourrages et les bordures ne permettent pas aux divs de remplir la fenêtre d'affichage.

4
Zheer McHammer Husain

Pour voir la hauteur de la fenêtre pendant (ou après) le redimensionnement, essayez-la:

$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});
0
SuSanda