Comment faire un composant fixé à l'intérieur d'un div?

Question

Je veux un div 'collant' pour coller à l'intérieur d'autres div 'scrollable', et scrollable est fixé à la fenêtre. Voilà ce que je l'ai essayé jusqu'à présent:

.outer { 
 
    background-color: green; 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 30px; 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: auto; 
 
} 
 
.inner { 
 
    background-color: blue; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
p { 
 
    height: 100px; 
 
}

<div class="outer" > 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <div class="inner"></div> 
 
</div>

Je veux la boîte bleue d'être toujours sur le fond de la div scrollable. J'ai regardé d'autres questions mais je n'ai pas trouvé de réponse. J'ai également essayé de rendre la boîte bleue "fixe" pour simuler ce comportement mais la flèche "bas" de la barre de défilement ne fonctionne pas, et c'est juste un hack, ne pense pas que c'est comme ça que ça doit être fait .
J'ai essayé d'utiliser cette classe inner pour css:

.inner { 
background-color: blue; 
position: fixed; 
top: 230px; 
left: 30px; 
height: 100px; 
width: 300px; 
} 

.outer { 
 
    background-color: green; 
 
    position: fixed; 
 
    top: 30px; 
 
    left: 30px; 
 
    height: 300px; 
 
    width: 300px; 
 
    overflow: auto; 
 
} 
 
.inner { 
 
    background-color: blue; 
 
    position: fixed; 
 
    top: 230px; 
 
    left: 30px; 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 
p { 
 
    height: 100px; 
 
}

<div class="outer" > 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <div class="inner"> </div> 
 
</div>

Y at-il une bonne façon de le faire?

Answer 1

Vous pouvez utiliser position: sticky mais ce n'est pas une norme

https://developer.mozilla.org/en-US/docs/Web/CSS/position

collant fonctionnera sur le chrome et FF, mais probablement pas IE, le test throughly avant d'utiliser

https://jsfiddle.net/n205jwkn/2/

.inner { 
    background-color: blue; 
    position: sticky; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
} 

OU

vous pouvez simuler avec un autre type de mise en place montré dans ce violon

https://jsfiddle.net/n205jwkn/1/

CSS

.outer { 
    background-color: green; 
    position: fixed; 
    top: 30px; 
    left: 30px; 
} 
.container { 
    height: 300px; 
    width: 300px; 
    overflow: auto; 
} 
.inner { 
    background-color: blue; 
    height: 100px; 
    width: 100%; 
} 
p { 
    height: 100px; 
} 

HTML

<div class="outer" > 
    <div class="container"> 
    <p> sample </p> 
    <p> sample </p> 
    <p> sample </p> 
    <p> sample </p> 
    <p> sample </p> 
    <p> sample </p> 
    <p> sample </p> 
    </div> 

    <div class="inner" ></div>  
</div> 

Answer 2

Essayez de créer un container ensemble et placez-la bleu div en tant que frère ou sœur de votre contenu, comme dans l'exemple suivant:

.outer { 
 
    background-color: green; 
 
    height: 200px; 
 
    width: 300px; 
 
    overflow: auto; 
 
} 
 

 
.inner { 
 
    background-color: blue; 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
p { 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="outer"> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    <p> sample </p> 
 
    </div> 
 
    <div class="inner"></div> 
 
</div>