javascript div jquery $(fenêtre).height() et $(document).height() retourne le même



jquery width (2)

J'ai besoin que mon image de fond soit en dessous de mon menu div. Donc, au lieu d'appliquer l'arrière-plan à l'élément body, je place un autre bg div qui contient mon corps div et définit la largeur à 100% (mon corps div a une largeur spécifiée) je place l'arrière-plan dans bg div.

Je l'ai testé et j'ai eu une demi-photo de fond parce que le document n'était pas assez long. Donc, je tente de faire une correction javascript pour cela.

<!DOCTYPE HTML>
.....
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
function setDocumentSize() {
    alert($(window).height());
    alert($(document).height());
    if ($(window).height()>$(document).height()) {
        var height = $(window).height()-$(document).height();
        document.getElementById('bg').style.height=height+"px"
        }
    }
.....
</script>
.....
<body onload="setDocumentSize()">
<div class="menu">
.....
</div>
<div class="bg">
    <div class="body">
    .....(background in this div) 
    </div>
</div>

Maintenant, les deux alertes apparaissent avec la hauteur de la fenêtre. Par conséquent, rien ne se passe.

J'utilise Firefox 16.0.2

Voici un lien vers la page actuelle http://servapps.dyndns-work.com/abstract/


Answer #1

Cela peut être fait en CSS. Vous devez vous assurer que tous les éléments contenant sont au moins la hauteur de la page ( height: 100% ). Cela inclut à la fois les éléments html et body .

Ce code devrait fonctionner avec votre site web:

html, body, #bg {
  height: 100%;
}

Answer #2

Une raison supplémentaire pour laquelle cela pourrait échouer est lorsque la déclaration doctype ( <!DOCTYPE html> ) est manquante. Ajouter ceci corrige le $(window).height() pour renvoyer la taille appropriée de viewport.





height