「一番上にスクロール」ボタンを使用すると、ページの下部に余分な空白が作成されます

Question

<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>

Answer 1

あなたの場合、sticky の代わりに position:fixed; を使用する方がよいと思います。 「ボタン」を画面の右端に配置するには、right: 0; を設定する必要があることに注意してください。あるいは、right: 20px; を設定し、margin 属性を削除することもできます。

簡単な説明

「余分な空白」が存在するのは、sticky が使用される場合、要素がドキュメントの通常のフロー内に配置されるためです。これは、position:relative; を使用し、top: -20px を設定するのと似ています。要素は 20 ピクセル上に移動しますが、元のスペースはドキュメント フロー内に「残る」ため保持されます。 position:fixed; を使用すると、要素がドキュメント フローから削除されます。

---

CSS でのドキュメント フローと配置について読むことをお勧めします:

• 通常のプロセスを説明します
• CSS 位置プロパティと値