Définir une div à l'intérieur d'un div pour faire défiler, tandis que le parent n'a pas de défilement
J'ai un div conteneur qui contient un grand nombre d'enfants divs. L'un des divs dans mon conteneur des maisons de commentaires. Au lieu de définir l'ensemble de la div pour faire défiler, je veux que tout reste en place, ne laissant que les commentaires div pour faire défiler. J'ai essayé le réglage de la mère de dépassement de la cacher, et le commentaire de div pour faire défiler, et la barre de défilement affiche sur la page, mais il est désactivé. Personne ne sait comment je peux faire cela?
CSS
#container
{
position: absolute;
overflow: hidden;
}
#comments
{
position: relative;
overflow: scroll;
}
HTML
<div id="container">
<div id="comments">
this is what I want to scroll
</div>
</div>
Je ne peut pas se débarrasser du conteneur, car il abrite de nombreux éléments enfants plus. Je veux juste tout le reste pour rester statique, tandis que seuls les commentaires pouvez faire défiler.
- Pourriez-vous montrer votre balisage (ou une version simplifiée de celui-ci)?
- Oui, donnez-moi une seconde et je vais ajouter une version simplifiée de la question principale.
- Merci! qui sera très utile =)
Vous devez vous connecter pour publier un commentaire.
Vous devez définir une hauteur spécifique sur les "commentaires" de la div pour s'assurer qu'il sait exactement quand pour faire défiler. Si il n'y a pas assez de contenu pour remplir ce récipient au-delà de la hauteur spécifiée, la barre de défilement peut apparaître avec
overflow:scroll
mais il sera désactivé. Si vous souhaitez que la barre de défilement s'affiche uniquement lorsque c'est réellement nécessaire, vous aurez envie d'utiliseroverflow:auto
que la règle CSS. Par le réglage de la hauteur du conteneur enfant et non pas le parent, le parent peut se développer que nécessaire.Dans votre exemple, le
position:absolute
sur le conteneur parent n'est pas requis pour obtenir la solution; cependant, vous avez peut-être compris que, pour quelque autre raison.Il est désactivé car il n'y a pas de hauteur définie sur l'élément. Overflow auto vous remplir la barre de défilement si vous définir une hauteur et le contenu s'étend au-delà de cette hauteur.
overflow: auto;
, il n'affiche pas l'affreux grisé barre de défilement.position: relative
qui était nécessaire pour moi pour le travailVous devez ajouter une largeur et hauteur:
Découvrez ce JSFiddle: http://jsfiddle.net/FgGmQ/
HTML:
CSS:
De nouveau, il suffit de cocher cette JSFiddle