<p>いくつかのチュートリアルに従って、CSS ベースのフローティング トップ スクロール ボタンを作成しました。ただし、最後の HTML 要素 (最後の行など) の下に余分な空白があることに気付きました。余分な空白の高さはボタンの高さ (50px) と一致します。 </p> <p> arrowUp div タグを囲むように追加の div タグを追加してみました。ギャップは減少しましたが、小さいながらも目立つ空白がまだ残っています。 </p> <p>余分な空白を避ける方法はないかと考えていました。 </p> <pre class="brush:css;toolbar:false;">#arrowUp { 位置: スティッキー; 幅: 50ピクセル; 下: 120ピクセル; 背景: #699462; 境界半径: 10px; アスペクト比: 1; マージン左: 自動; マージン右: 20px; // margin-bottom: 150px; } #arrowUp a { コンテンツ： ""; 位置: 絶対; 差し込み: 25%; 変換: 移動 Y(20%) 回転(-45 度); ボーダートップ: 5px ソリッド #fff; ボーダー右: 5px ソリッド #fff; }</pre> <pre class="brush:html;toolbar:false;"><div> <p> 最初の行。 </p> <br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<br />gt;
gt;

<p> 最後の行。 </p> </div> <div id="arrowUp"> <a href="#"></a> </div></pre> <p><br /></p>