Comment puis-je activer la barre de défilement uniquement lorsque la fenêtre est redimensionnée plus petits?

Une page de site web.
En-tête en haut de la page avec les liens d'ancrage
À différents divs (articles) sur la page.

Dire la résolution de mon écran est de 1280*800 et chaque div section max 800 et le contenu de chaque div section est visible lorsque mon navigateur est de taille maximale. J'ai oublié de mentionner que le défilement est désactivé afin que les autres divs sont uniquement visibles (défilement automatique) à l'aide de l'ancre des liens vers le haut. Donc voilà le problème, quand je redimensionner mon navigateur, disons, par exemple, il n'existe qu'450px la valeur de la hauteur sur mon navigateur, je ne peux voir que la quantité de contenu sur l'écran et que vous ne faites défiler jusqu'au bas de la div, de sorte qu'il touche le fond de mon navigateur.

Un autre point à comprendre est que tous les éléments dans le div en lui-même ne débordent pas la hauteur de la div, donc un simple débordement ne fonctionne pas parce que la question est à voir avec la taille de l'navigateurs' de hauteur.

À essence lorsque la fenêtre du navigateur est rien de moins que de 800px, la div est alors couvert de haut en bas par le montant de la réduction par le navigateur. Je veux que l'ensemble de la div (PAS LE CONTENU à l'INTÉRIEUR) pour être poussé vers le haut (position supérieure) aussi loin qu'il se doit de sorte que le bas de la div c'est à dire 800e pixels touche la partie inférieure du navigateur.

Toute solution?

InformationsquelleAutor Muhammed Bhikha | 2012-10-24
  1. 2

    Vous pouvez écouter des changements dans la taille de la fenêtre et d'ajuster la taille de votre divs pour elle. De cette façon, le div aurez toujours la taille de la fenêtre, de sorte que si elle devient trop petite son débordement va le montrer.

    $("div").css("height", $(window).height());
$(​window​).bind("resize",function() {
    $("div").css("height", $(window).height());
});​​​​

    Exemple de travail à jsFiddle. N'oubliez pas de mettre le div du dépassement de auto, afin de voir si l'écran est trop petit.

    Mise à jour: de ce que j'ai pu comprendre dans votre mise à jour, vos besoins peuvent être satisfaits avec de simples feuilles de style CSS. Laissez le html, body dépassement de à volonté, mais le "conteneur" div's le débordement hidden (donc il ne se défiler une page à la fois) et de ses height à 800px. Lorsque la fenêtre du navigateur est redimensionnée à moins de 800 px, le corps des barres de défilement apparaîtra, vous permettant de faire défiler le conteneur div en haut et en bas. À la fois le contenant et le contentes restera la même taille: 800px.

    html,body {
    overflow: auto;
}

.container, .contents {
    height: 800px;
    overflow: hidden;
}

    Exemple de travail à jsFiddle. Est-ce que vous avez besoin? Si vous avez littéralement veulent pousser le div conteneur jusqu'à son fond est orientée vers la fenêtre, essayez de définir padding-top ou margin-top au lieu de top (mais dans ce cas je ne sais pas comment le défilement de travail).

    • votre réponse est dans la ligne de ce que j'ai besoin, en gros si le navigateur est à moins de 800px de hauteur, les besoins de défilement pour déplacer la position du haut de la div, alors qu'ils défiler jusqu'au bas de la div atteint le bas du navigateur. Aucun indice?
    • Désolé, mais je ne comprends pas comment c'est différent de ce que mon exemple a montré. Pourriez-vous expliquer plus?
    • Première question: je n'ai pas vraiment beaucoup d'expérience dans l'écriture de "pure" de JavaScript, j'ai toujours utilisé le web frameworks tels que jQuery (qui je suppose était ok, puisque votre question est taggés avec elle). J'ai peur que quelqu'un d'autre à répondre. Deuxième question: faut simplement adapter votre sélecteur à vos besoins. $("#myelement") pour sélectionner l'identité de la, $(".myclass") à sélectionner pour la classe, etc.
    • Im ne parle pas du pur javascript, Im demandant où dois-je les mettre, qu'en est-il juste <script>your code above</script> ou est-il <script>somethinghere | your code | something here </script
    • ok heres la confusion. Dans le JsFiddle, le dépassement de capacité se produit uniquement lorsque l'écran chevauche la div, ce qui est bien. parce que le contenu à l'intérieur est caché. mon problème est que j'ai un conteneur(diV) avec d'autres divs à l'intérieur. le conteneur est de 800px de hauteur, et le contenu ne dépasse pas cette. tout l'objectif est de pousser le haut de la position réelle de l'div au dessus de l'écran.
    • Le code doit être à l'intérieur d'un $(document).ready api.jquery.com/ready
    • Jan a dit, à l'intérieur de $(document).ready(function() { ... }). Comme pour vos autres besoins, vérifier ma mise à jour et voir si c'est ce que vous avez besoin.
    • L'ai eu à travailler plus ou moins. Merci les gars, juste un petit problème. Dans le code ci-dessus que @mgibsonbr aimablement fourni. Est-il de toute façon, je peux spécifier le nombre de pixels de défilement? Au moment où le défilement de la capacité dépend de la hauteur définie dans le CSS, si je veux spécifier le montant de défilement?
    • Un combinaison de ces deux techniques, à l'aide de conteneurs imbriqués, pourrait être juste ce dont vous avez besoin. Un "extérieur" div qui change de taille lorsque la fenêtre est redimensionnée (similaire à ma première réponse), et un "intérieur" div qui reste de la même taille et défile à l'intérieur de l'extérieur div (similaire à ma deuxième réponse). Exemple. (BTW, vous avez le contrôle de la CSS, vous pouvez spécifier la quantité de défilement" autant que vous le souhaitez - de manière statique, modifiant le fichier css, ou de manière dynamique, en appelant $.css sur les éléments souhaités)

    InformationsquelleAutor mgibsonbr
  2. 0

    Utiliser des requêtes de média:

    @media screen and (max-height: 450px) {
  body { overflow: auto; } /* Or change the height or whatever */ 
}
    • le problème est que le corps a un dépassement de capacité de caché ensemble en tant que norme. fondamentalement, mon contenu ne dépasse jamais 800px de hauteur, j'ai donc besoin de le faire défiler jusqu'à être activé rien de moins que de 800px.
    • Puis changement de 450px à 800px ou la valeur que vous avez besoin?
    InformationsquelleAutor bookcasey
  3. 0

    Je pense que la meilleure solution pour définir min-hauteur de la principale envelopper 800px, sinon vous devez ajouter débordement caché de votre contenu principal. Le défilement peut être déclenché par la mise en contenu principal en position haute, mais il doit être absolu ou similaire. Vous chat écrire une fonction sorcière vous aide à déplacer le contenu principal changement c'est top position.

    InformationsquelleAutor GomatoX