web-dev-qa-db-fra.com

Comment régler correctement la hauteur 100% DIV pour qu'elle corresponde à 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'en bas de la fenêtre.

J'ai utilisé jQuery pour appliquer dynamiquement le style CSS en ligne à l'encapsuleur 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 plus grande taille précédemment redimensionnée, la hauteur du document s'étend par cette différence, ce qui rend le wrapper DIV infini si vous continuez à redimensionner la fenêtre à l'infini et que vous avez une infinie espace d'affichage vertical.

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

Comment régler ceci?

MISE À JOUR: (fenêtre) .height ne semble pas fonctionner, car la hauteur de la fenêtre est une hauteur de fenêtre. Lorsque votre fenêtre est plus petite que le contenu et que vous la faites défiler, l'encapsuleur conserve toujours la taille de la fenêtre et ne s'étend pas jusqu'au bas de la position actuelle de la fenêtre.

jqueryhtmlcssheight
21
DominiqueBal

Je l'ai compris moi-même à 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 de hauteur et 100% de hauteur
  2. Utilisez 2 wrappers imbriqués, l'un dans l'autre, par ex. #wrapper et #truecontent
  3. Obtenez la hauteur d'une fenêtre de navigateur. SI il est plus grand que #wrapper, définissez le CSS en ligne pour #wrapper pour qu'il corresponde à la hauteur actuelle de la fenêtre du navigateur (tout en gardant #truecontent intact)

  4. Écoutez l'événement (window) .resize et appliquez UNIQUEMENT la hauteur CSS en ligne SI la fenêtre est plus grande que la hauteur de #truecontent, sinon conservez intacte

    $(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
DominiqueBal

Le moyen le plus simple consiste à ajouter:

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

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

24
Tharindu Liyanage

Vous pouvez le faire absolute et mettre des zéros à top et bottom c'est-à-dire:

#fullHeightDiv {
    position: absolute;
    top: 0;
    bottom: 0;
}
11
Jovan Perovic

moyen le plus simple que j'ai trouvé est la hauteur de la fenêtre d'affichage dans css ..

div {height: 100vh;}

cela prend la hauteur de la fenêtre 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
hlv
html, body {
    height:100%;
}
#wrapper {
    min-height:100%;
}
4
Will

c'est comme ça que j'ai répondu

<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, à chaque événement de redimensionnement, je remplacerai la hauteur de la division dans ce cas, une image que j'utilise comme superposition pour l'arrière-plan et l'avoir avec une opacité pas si colorée aussi je peux la teindre dans mon cas avec la couleur d'arrière-plan.

mais c'est une autre histoire

2
Arthur Kielbasa

Utilisation #element{ height:100vh}

Cela définira la hauteur du #element à 100% de viewport. J'espère que cela t'aides.

1
kishan phadte

comment c'est

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

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

0
Navneeth G