Le bouton Faire défiler vers le haut crée un espace blanc supplémentaire en bas de la page
P粉226642568
2023-08-13 19:52:48
<p>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). </p>
<p> 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. </p>
<p>Je me demandais s'il existait un moyen d'éviter l'espace blanc supplémentaire ? </p>
<pre class="brush:css;toolbar:false;">#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 ;
}</pré>
<pre class="brush:html;toolbar:false;"><div>
<p> Première ligne. </p>
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<p> </p>
</div>
<div id="arrowUp">
<a href="#"></a>
</div></pré>
<p><br /></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :