Le bouton Faire défiler vers le haut crée un espace blanc supplémentaire en bas de la page

Question

J'ai suivi quelques tutoriels pour créer un bouton de défilement flottant vers le haut basé sur CSS. Cependant, j'ai remarqué qu'il y avait un espace blanc supplémentaire sous le dernier élément HTML (par exemple la dernière ligne). La hauteur de l'espace blanc supplémentaire correspond à la hauteur de mon bouton (50px).

J'ai également essayé d'ajouter une balise div supplémentaire pour entourer la balise div arrowUp, et l'espace a été réduit, mais il reste encore un espace blanc petit mais visible.

Je me demandais s'il existait un moyen d'éviter l'espace blanc supplémentaire ?

#arrowUp {
  position : collante ;
  largeur : 50 px ;
  bas : 120 px ;
  arrière-plan : #699462 ;
  rayon de bordure : 10 px ;
  rapport hauteur/largeur : 1 ;
  marge gauche : auto ;
  marge droite : 20 px ;
// marge inférieure : 150px ;

}

#arrowUp un {
  contenu: "";
position : absolue ;
  encart : 25 % ;
  transformation : translationY (20 %) rotation (-45 deg );
  bordure supérieure : 5px solide #fff ;
  bordure droite : 5px solide #fff ;
}

 Première ligne. 































































































 





            

Answer 1

Je pense que dans votre cas, il vaut mieux utiliser position: fixed;而不是sticky。请注意，你需要设置right: 0;来将“按钮”定位在屏幕的右边缘。或者，你可以设置right: 20px; et supprimer l'attribut margin.

Explication rapide

Les "espaces supplémentaires" existent car l'utilisation de sticky时，元素被定位到文档的正常流程中。这就像使用position: relative;并设置top: -20px一样-元素会向上移动20px，但原始空间被保留，因为它“停留”在文档流中。而使用position: fixed; retire l'élément du flux de documents.

---

Je recommande de lire ceci sur le flux et le positionnement des documents en CSS :

• Expliquez le processus normal
• Propriété et valeur de position CSS