28112 sujets

CSS et mise en forme, CSS3

Margin, padding et sticky

Salutations !

Je suis en train de nettoyer mon code html d'un max de bidouilles à base <br> successifs et de div vide. Et là je bute sur un mon petit post-it en 
position: sticky
afin qu'il reste un peu en haut avant de disparaitre (pour attirer un peu l'attention).

https://codepen.io/kerlutinoec/pen/QWObxxz

La section le contenant se termine par une div vide 
<div style="height: 18em;"></div>
pour l'aération. (Celle qui était en haut a pu être éliminée par un 
#contacts { padding-top: 6em; }
mais pour le bas ça ne veut pas !)
Des 
margin-bottom: 18em;
sur #contacts ou .conteneurcollant2 n'ont aucun effet.
Le même sur .post-it ou un 
padding-bottom: 18em;
sur #contacts ou .conteneurcollant2 désactive totalement l'effet sticky !!
Idem avec un padding-top ou margin-top sur la section d'après !!

Quelqu'un aurait une idée de comment faire pour remplacer cette div vide (ou je laisse comme ça ?) ?

Merci d'avance
Modifié par kerlutinoec (28 Jan 2022 - 14:22)
Modérateur
Salut,

kerlutinoec a écrit :

Des margin-bottom: 18em; sur #contacts ou .conteneurcollant2 n'ont aucun effet.
Le même sur .post-it ou un padding-bottom: 18em; sur #contacts ou .conteneurcollant2 désactive totalement l'effet sticky !!
Idem avec un padding-top ou margin-top sur la section d'après !!

Alors c'est pas exactement ca. Ton post-it est sticky sur toute la surface de son parent #contacts. Le padding ou le margin ne compte pas dans cette surface. Donc visuellement tu as bien un espace noir mais le sticky reste l'intérieur de ta div, et comme il n'y a que le post-it dedans bah il ne peux pas glisser plus loin que sa propre position. Le div vide est une solution effectivement. Si tu veux t'en passer tu peux utiliser un ::after en CSS mais le principe est exactement le meme : rajouter du contenu pour donner de la zone scrollable.
#contacts::after { 
  content:"";
  display: block;
  height:18em;
}


Sinon, sans div vide ou ::after, tu peux rajouter un min-heigh sur #contacts et l'augmenter jusqu'a ce que ca te convienne. Ah oui il faut aussi virer le max-height, pourquoi il est là ?
Meilleure solution
_laurent a écrit :
Salut,


Alors c'est pas exactement ca. Ton post-it est sticky sur toute la surface de son parent #contacts. Le padding ou le margin ne compte pas dans cette surface. Donc visuellement tu as bien un espace noir mais le sticky reste l'intérieur de ta div, et comme il n'y a que le post-it dedans bah il ne peux pas glisser plus loin que sa propre position. Le div vide est une solution effectivement. Si tu veux t'en passer tu peux utiliser un ::after en CSS mais le principe est exactement le meme : rajouter du contenu pour donner de la zone scrollable.
#contacts::after { 
  content:"";
  display: block;
  height:18em;
}


Sinon, sans div vide ou ::after, tu peux rajouter un min-heigh sur #contacts et l'augmenter jusqu'a ce que ca te convienne. Ah oui il faut aussi virer le max-height, pourquoi il est là ?


OK j'ai compris le principe.
Je pensais qu'un padding suffirait à ce que ça puisse glisser dedans (apparemment pas).
Le max-height sert à limiter la hauteur des marges noires sur un petit écran type smartphone en mode paysage (pas sûr que ça marche).
Finalement je pense que je vais rester avec ma bidouille.
Merci pour ton aide
Sujet clos
Aller à