Comment définir correctement la hauteur 100% DIV pour correspondre à la hauteur du document / de la fenêtre?

J'ai un wrapper positionné au centre avec une image d'arrière-plan répétée en y: 

<body>
    <div id="wrapper">
        ...some content
    </div>
</body>

#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background-image: url(image.jpg) 250px 0px repeat-y;
}

Problème: lorsque la taille de la fenêtre est supérieure à la hauteur du wrapper héritée de son contenu, l'image ne se répète évidemment pas sur l'axe des y jusqu'au bas de la fenêtre.

J'ai utilisé jQuery pour appliquer dynamiquement le style CSS en ligne au wrapper en fonction de la hauteur réelle du document (lorsque DOM est prêt et lors de l'événement de redimensionnement de la fenêtre): 

$(function(){
    $('#wrapper').css({'height':($(document).height())+'px'});
    $(window).resize(function(){
        $('#wrapper').css({'height':($(document).height())+'px'});
    });
});

Le problème avec cette approche est que chaque fois que l'on étend la hauteur de la fenêtre à une taille plus grande que la taille la plus grande précédemment redimensionnée, la hauteur du document s'étend de cette différence, rendant essentiellement le wrapper div infini si vous continuez à redimensionner la fenêtre à l'infini et avoir un espace d'affichage vertical infini.

Sur un écran typique de 30" pouces avec une hauteur de 1600px, lorsque l'utilisateur ouvre le site Web avec une hauteur de fenêtre 1000px et wrapper est 800px haute, le jquery ci-dessus définit la hauteur à 1000px carrelage l'image d'arrière-plan correctement. À ce stade, une fois que l'utilisateur étend la taille de la fenêtre à 1400px, le 1400px est une nouvelle taille de document "mémorisée par défaut" et ne se met pas à jour même si l'utilisateur redimensionne sa fenêtre à la hauteur d'origine 1000px, en ajoutant 400px à la hauteur de la barre de défilement

Comment résoudre ce problème?

Mise à jour: (fenêtre).height ne semble pas fonctionner, car la hauteur de la fenêtre est une hauteur de la fenêtre. Lorsque votre fenêtre est plus petite que le contenu et que vous la faites défiler, le wrapper reste toujours la taille de la fenêtre et ne s'étend pas au bas de la position de la fenêtre actuelle.

21
demandé sur DominiqueBal 2012-02-09 19:47:17

9 réponses

Je l'ai compris moi-même avec l'aide de la réponse de quelqu'un. Mais il l'a supprimé pour une raison quelconque.

Voici la solution:

  1. supprimer tous les hacks CSS height et 100% heights
  2. Utilisez 2 wrappers imbriqués, l'un dans l'autre, par exemple #wrapper et # truecontent
  3. récupère la hauteur d'une fenêtre du navigateur. Si elle est supérieure à #wrapper, définissez le CSS en ligne pour #wrapper pour qu'il corresponde à la hauteur de la fenêtre d'affichage du navigateur actuel (tout en conservant #truecontent intact)

  4. Écoutez (fenêtre).redimensionnez l'événement et n'appliquez la hauteur CSS en ligne que si la fenêtre est supérieure à la hauteur de # truecontent, sinon conservez intact 

    $(function(){
    var windowH = $(window).height();
    var wrapperH = $('#wrapper').height();
    if(windowH > wrapperH) {                            
        $('#wrapper').css({'height':($(window).height())+'px'});
    }                                                                               
    $(window).resize(function(){
        var windowH = $(window).height();
        var wrapperH = $('#wrapper').height();
        var differenceH = windowH - wrapperH;
        var newH = wrapperH + differenceH;
        var truecontentH = $('#truecontent').height();
        if(windowH > truecontentH) {
            $('#wrapper').css('height', (newH)+'px');
        }

    })          
});
24
répondu DominiqueBal 2012-02-09 23:48:04

, Le plus simple est d'ajouter le:

$('#ID').css("height", $(document).height());

Après la hauteur de page correcte est déterminée par le navigateur. Si la hauteur du document est modifiée une fois de plus, réexécutez le code ci-dessus.

23
répondu Tharindu Liyanage 2014-12-26 02:39:03

Vous pouvez le faire absolute et mettre des zéros à top et bottom, ce qui est:

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}
11
répondu Jovan Perovic 2014-05-27 09:15:18

Le moyen le plus simple que j'ai trouvé est viewport-height en css.. 

div {height: 100vh;}

Cela prend la hauteur de la fenêtre d'affichage de la fenêtre du navigateur et la met à jour lors des redimensionnements.

Voir "Puis-je utiliser" pour la liste de compatibilité du navigateur

5
répondu hlv 2014-11-12 01:48:16 
html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}
4
répondu Will 2012-02-09 16:06:37

Voilà comment j'ai répondu que 

<script type="text/javascript">
    function resizebg(){
        $('#background').css("height", $(document).height());
    }
    $(window).resize(function(){
        resizebg(); 
    });
    $(document).scroll(function(){
        resizebg(); 
    });
    //initial call
    resizebg();

</script>

Css: 

#background{
position:absolute;
top:0;
left:0;
right:0;
}

Donc, fondamentalement, sur chaque redimensionnement de l'événement, je vais remplacer la hauteur de la div dans ce cas, une image que j'utilise comme revêtement pour le fond et l'opacité pas tellement coloré aussi je peux teinte dans mon cas avec la couleur d'arrière-plan.

, Mais c'est une autre histoire

2
répondu Arthur Kielbasa 2014-11-21 11:00:07

Utiliser #element{ height:100vh}

Cela définira la hauteur du #element à 100% de viewport. Espérons que cette aide.

1
répondu kishan phadte 2017-01-03 06:57:00

Pourquoi n'utilisez-vous pas width: 100% et height: 100%.

0
répondu Navneeth G 2012-02-09 15:49:02

Comment ça 

<style type="text/css">
#wrapper{
width: 900px;
margin: 0 auto 0 auto;
background: url('image.JPG') 250px 0px repeat-y;
}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function handleResize() {
var h = $(window).height();
        $('#wrapper').css({'height':h+'px'});
}
$(function(){
        handleResize();

        $(window).resize(function(){
        handleResize();
    });
});
</script>
</head>
<body>
        <div id="wrapper">
                ...some content
        </div>
</body>
0
répondu t q 2012-02-09 16:02:32