Multiple DIV Bottom
Bonjour,
j'essaye de faire en sorte que mes DIV bubble se retrouve l'un en dessous des autres en les laissant en bas du DIV Bubbles, je suis pas expert en CSS donc je rame un peu là.
CSS :
#Content
{
width: 100%;
height: 100vh; min-height: 100vh; max-height: 100vh;
}
#Wrapper
{
width: 450px;
height: 300px;
}
#Avatar
{
float: left;
width: 150px;
min-height: 300px;
background: url("../images/Avatar.png") left bottom no-repeat;
}
#Bubbles
{
position: relative;
float: right;
width: 300px;
min-height: 300px;
background-color: #666666;
}
#Bubbles .bubble
{
position: absolute;
bottom: 0px;
margin: 5px;
padding: 5px;
width: 280px;
border-radius: 0.4em;
background-color: #F2F2F2;
box-shadow: #cccccc 2px 2px 0px;
}HTML :
<div id="Content">
<div id="Wrapper">
<div id="Avatar"></div>
<div id="Bubbles">
<div class="bubble">Contenu du texte1</div>
<div class="bubble">Contenu du texte2</div>
</div>
</div>
</div>Ce que j'obtiens
Malheureusement du coup tous les DIV bubble se superpose etant donnée qu'ils ont tous le bottom:0;
Ce que je veux
Comment faire pour que chaque DIV bubble ce retrouve les un en dessous des autres ?
24 réponses
Alors il ne faut pas utiliser les position relative et absolute, d'ailleur le float non plus, le mieux c'est d'utiliser les flexbox, plus moderne, et plus intuitif surtout:
#Content
{
width: 100%;
height: 100vh; min-height: 100vh; max-height: 100vh;
}
#Wrapper
{
width: 450px;
height: 300px;
display: flex; (ça va mettre les div enfants cote a cote)
margin-right: auto; (si tu veux pousser Bubbles à droite)
}
#Avatar
{
width: 150px;
min-height: 300px;
background: url("../images/Avatar.png") left bottom no-repeat;
}
#Bubbles
{
width: 300px;
min-height: 300px;
display:flex; (élements enfants cote a cote)
flex-direction: column; (les élements enfants ne sont plus cote a cote mais l'un sur l'autre)
justify-content: flex-end; (pousse tous les Bubble en bas de la div)
background-color: #666666;
}
#Bubbles .bubble
{
margin: 5px;
padding: 5px;
width: 280px;
border-radius: 0.4em;
background-color: #F2F2F2;
box-shadow: #cccccc 2px 2px 0px;
}La flexbox c'est comme les antibiotiques, c'est automatique :D
J'ai cherché une solution à ce problème, et le seul truc que je verrais serait de mettre les bubbles dans un container qui serait à l'intérieur de #Bubbles ou alors si #Bubbles a une taille fixe, le margin-top auto du first child peut lui aussi avoir une margin fixe
Ou alors en esperant que la solution de rahulp fonctionne :/
Je connais pas encore les flexbox je vais m'y interresser de plus pres ;)
En tout cas ca fonctionne nickel.
Merci
Et pour l'overflow sur les flex ca marche comment alors ?
super de rien ;)
Alors en gros les flex ca sertr comme son nom l'insique a faire des elements flaxibles
en gros le display flex va aligner tous les enfants, et a partir de la on joue
On peut changer la direction principale du flex avec flex-direction (row pour en ligne, valeur par defaut, et column pour en colonne)
Ensuite on met en place la disposition avec justify-content pour l'axe principal (horizontal si le flex est en direction row, vertical si flex-direction est en column), et align-items pour l'axe secondaire
On peut même inverser l'ordre avec flex-direction: reverse-row ou reverse-column
Eeeet plein d'autres truc je te laisses découvrir, mais en gros c'est la façon de faire moderne
Il y'a une méthode encore plus moderne c'est le display:grid, maaais c'est mieux la flexbox
quand tu aura verifié la base du flexbox tu peux t'entrainer dessus:
https://flexboxfroggy.com/#fr
Super ce site je viens de terminée ;)
Mais comment je fais pour faire un overflow du coup ? :/
Pour l'overflow tu veut dire que les éléments bubble doivent sortir de la div Bubbles ou bien qu'il faut un scroller?
Pour le scroller tu rajoutes overflow: auto; et ca scrollera en principe
This is the occasion Ive been awaiting an extended time. I had been strolling for my university crew 1/2 of marathons and would like to join. Personally, I assume those occasions want to appear greater often
Being a crew of Professional builders and hardcore coders, we ensure to place the satisfactory essence of creativity to supply exactly what you imagined to your project. Our middle competency is Web and
Mobile Applications. We have a sturdy agree with that Long time period Relationship with customers is the important thing.
You can visit here: https://thumzap.com/
Alors oui avec overflow: auto ca fonction mais du coup on peux pas scroller et la barre de scroll ne s'affiche pas.
Bon alors j'ai fais comme ceci :
#Bubbles
{
display: flex;
flex-direction: column;
flex-flow: wrap row-reverse;
width: 250px;
height: 300px;
overflow: hidden scroll;
/* justify-content: flex-end; */
}j'ai retirer le justify-content car avec lui la scrollbar ne fonctionnais pas.
j'ai rajouter flex-flow a la place, mais le problème c'est que comme ca il agrand les bubbles pou qu'ils prennent tout le flex.
Un idée pour résoudre ca ?
Mmmh tu pourrais héberger un exemple ou un dessin fait sur paint de ce que tu veux et ce qui se passe? ^^'
Alors avec le flex flow tu a reglé sur row-reverse, du coup tu peux virer flex-direction: column il n'est plus utilisé, enfin il se fait ecraser par le flex flow x)
Et la il faudrait mettre un align-items: flex-end , ca va pousser les éléments en bas et il ne devrait plus y avoir ce probleme, c'est un comportement de flex, quand l'axe vertical n'a pas de règle d'lignement, le flex en conclut qu'il faut remplir le container
Après il faudra aussi ajouter un height au .bubble sinon flexbox va s'arranger pour caser tous les éléments dans le container (la flexbox prends beaucoup d'initiatives ^^')
voila : https://codepen.io/vertodebru/pen/JjWrJay
j'ai essayer en mettant align-content : flex-end;, il fait ce que je veux mais n'affiche pas la scrollbar quand il y a plusieurs .bubble
Mmmh ca doit etre un problème de navigateur, sur firefox ca affiche la scrollbar en tout cas :/
T'es sur quel navigateur? peut etre que les autres navigateurs veulent qu'il y'ai plus de bubbles pour commencer à l'afficher
a okay je vois
alors l'align content casse la scrollbar (je savais pas ca
Bref je vois ce qu'il faut faire
#Bubbles
{
display: flex;
flex-direction: column;
width: 250px;
height: 300px;
overflow: hidden scroll;
}Ensuite rajoutes ça:
#Bubbles > :first-child {
margin-top: auto !important;
}Et enfin pour éviter que tes bubble se fassent écraser, il faut désactiver le flex shrink:
#Bubbles .bubble
{
margin: 5px;
padding: 5px;
width: 92%;
min-height: 25px;
flex-shrink: 0;
border-radius: 0.4em;
background-color: #F2F2F2;
box-shadow: #cccccc 2px 2px 0px;
}Et la tout va bien :D
super nickel ;)
Par contre pourquoi sur Firefox il affiche pas l'ombre du bas sur le dernier bubble ?
J'ai modifier le Pen pour que tu voix ce que ca donne : https://codepen.io/vertodebru/pen/JjWrJay
parce que l'élément est collé en bas de #Bubble ^^'
Alors:
#Bubbles {
padding-bottom: 5px;
}Faut créer un petit espace pour découvrir l'ombre :p
Ben pourtant il est deja défini avec padding: 5px; et ca le fait juste avec Firefox ...
Dans le code que tu m'as envoyé j'ai ça, pas de padding :/
après si tu parles du padding du navigateur il n'est pas prioritaire sur les éléments selon le navigateur (firefox doit l'annuler)
#Bubbles
{
display: flex;
flex-direction: column;
width: 250px;
height: 300px;
overflow: hidden auto;
/* Firefox */
scrollbar-color: rgb(0, 150, 255) rgba(0,0,0,0.15);
scrollbar-width: thin;
}Oui effectivement j'ai confondu avec bubble, c'est la fin de journée ca doit etre ca ^^
Cela dit meme avec le padding-bottom: 5px;
il ne change rien sur FF ... :/
The problem you're having with the footer is that the footer is outside the content div, which is not inherently bad, but you have a static height on it (400px) which won't allow the footer to butt up against the bottom of the div.
And I've just done that and the entire page screwed up.
SO, take out all the absolute positioning's, margin-top's (or leave those if you like), and static heights and you'll be close to where you want to be. Next, to finish it up, you need to make the elements display:none; instead of visibility: hidden;. This should give you the effect you're looking for.
ok je vais regarder ça demain, mais j'ai quand même l'impression que Firefox ne prend pas les margin sur le scroll. J'ai essayer avec un scrolling Horizontal et c'est le même problème, il coupe le margin de fin.
Voila j'ai fais comme tu m'as dit popotte, et effectivement en les mettant dans un autre Div ca a résolu le probleme.
Un grand merci a toi pour ton aide. ;)
En général Firefox est très permissif dans le CSS, mais pour ce système de marges au scroll il a un problème ouai :/
Ah bah super si ça fonctionne :D Bon du coup il fallait un #BubblesContainer ^^' c'est vrai que quand on fait de la compatibilité navigateur on peut se permettre de modifier la structure :)