Die Schaltfläche „Nach oben scrollen“ erzeugt zusätzlichen Leerraum am unteren Rand der Seite
<p>Ich habe einige Tutorials befolgt, um eine CSS-basierte schwebende Schaltfläche zum Scrollen nach oben zu erstellen. Allerdings ist mir aufgefallen, dass unter dem letzten HTML-Element (z. B. der letzten Zeile) zusätzlicher Leerraum vorhanden ist. Die Höhe des zusätzlichen Leerraums entspricht meiner Schaltflächenhöhe (50 Pixel). </p>
<p> Ich habe auch versucht, ein zusätzliches Div-Tag hinzuzufügen, um das ArrowUp-Div-Tag einzuschließen, und die Lücke wurde verringert, aber es gibt immer noch einen kleinen, aber auffälligen Leerraum. </p>
<p>Ich habe mich gefragt, ob es eine Möglichkeit gibt, den zusätzlichen Leerraum zu vermeiden? </p>
<pre class="brush:css;toolbar:false;">#arrowUp {
Position: klebrig;
Breite: 50px;
unten: 120px;
Hintergrund: #699462;
Randradius: 10px;
Seitenverhältnis: 1;
Rand links: auto;
Rand rechts: 20px;
// margin-bottom: 150px;
}
#arrowUp ein {
Inhalt: "";
Position: absolut;
Einsatz: 25 %;
transformieren: translatorY(20%) rotieren(-45deg);
border-top: 5px solide #fff;
border-right: 5px solide #fff;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<p> Erste Zeile. </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> Letzte Zeile. </p>
</div>
<div id="arrowUp">
<a href="#"></a>
</div></pre>
<p><br /></p>
