Elément HTML en position: absolute vs. scroll

J'ai deux div avec l'attribut position défini sur absolute. L'un d'eux est un fils d'un autre div scrollable. Quelque chose comme ça:Elément HTML en position: absolute vs. scroll

<body> 
    <div class="foo" id="outside"></div> 

    <div class="bar"> 
    <div class="foo" id="inside"></div> 
    </div> 
</body>

En CSS:

.foo{position:absolute;} 
.bar{max-width: 300px;}

Maintenant, disons que le bar div a une longue contenu et que l'utilisateur peut faire défiler (juste la div, pas la page entière!) ; le div inside ne défilera pas avec son père. Au contraire, le div outside défilera avec toute la page si elle est assez longue pour faire défiler. Je veux le div inside pour faire défiler avec le div, comment puis-je reproduire le comportement de la div outside sur le div inside?

EDIT: J'ai lu à nouveau mon message, ce n'était pas si simple, je suis désolé. Je vais essayer avec un exemple:

http://jsfiddle.net/QYHSd/2/

Je veux la div rouge pour faire défiler le contenu du vert lorsque l'utilisateur fait défiler le div vert. Désolé encore si je ne suis pas capable d'expliquer bien ce que j'aime obtenir.

Source

2013-09-02 Federinik

fixer la hauteur 'bar', et il mit son 'débordement' à 'auto'. – avrahamcool

Ajouter position: relative; à .bar. Cela va changer le contexte pour le positionnement absolu sur .foo de body à .bar.

.bar { 
    position: relative; 
    max-width: 300px; 
    height: 100px; 
    overflow-y:scroll; 
    overflow-x:hidden; 
}

jsFiddled here

Source

2013-09-03 18:40:16

Je vous suggère de le prouver en modifiant le jsFiddle de la question OP. –

@MilchePatern Okay: http://jsfiddle.net/AaLPp/ –

Cela fonctionne maintenant, merci à tous: D – Federinik

.bar { 
max-width: 300px; 
max-height: 300px; 
overflow-y:scroll; 
overflow-x:hidden; 
}

Cela fera en sorte qu'il y aura toujours une barre de défilement visible même s'il n'y a pas de contenu dans la div. Si vous voulez que la barre de défilement ne s'affiche que si nécessaire, utilisez "auto" au lieu de "scroll".

Source

2013-09-02 16:14:49

Elément HTML en position: absolute vs. scroll

Répondre

Questions connexes