Quelqu’un pourrait-il m’aider s’il vous plaît à faire div#bottom stick au bas du div parent, alors quand je clique sur le bouton à l’intérieur, il me permettra d’afficher des éléments de div#list ci-dessus?
De préférence, je voudrais éviter JS, jQuery, etc. ou du moins dans la mise en page:
... ...
.wrapper{position:relative;} .bottom{position:absolute; bottom:0;}
Édité
Grâce à @ centr0 et @TJ Crowder, la clé est la suivante position:relative dans .wrapper “contiendra” tout élément ayant une position:absolute . C’est comme déclarer des limites pour .bottom . Sans position:relative dans .wrapper , .bottom sortirait de cette div
Je cours à un problème similaire. La solution de Val est bonne, mais a un problème: la div interne restra en bas, mais cela n’affectera pas la hauteur de parrent div, grâce à sa “position: absolute;” (il est hors du stream de mise en page).
Voici donc ma solution étendue pour toute personne ayant un problème similaire:
.wrapper { position: relative; padding-bottom: 50px; } .wrapper .bottom { position: absolute; bottom: 0px; height: 50px; }
Comme vous pouvez le voir, je règle la hauteur du fond de la patère. Le désavantage est que la hauteur du pied de page est à deux endroits. Mais je pense que c’est une bonne solution par exemple pour la liste de produits, où il y a une hauteur fixe en pied de page de la boîte (comme pour le prix, etc.).
Rappelez-vous que chaque fois que vous définissez “position: absolute;”, l’élément sera absolument positionné sur le premier div parent, qui a un atsortingbut set position. Ou, éventuellement, contre la page elle-même.