위로 스크롤 버튼을 누르면 페이지 하단에 추가 공백이 생성됩니다.
<p>몇 가지 튜토리얼을 따라 CSS 기반 플로팅 스크롤 상단 버튼을 만들었습니다. 그러나 마지막 HTML 요소(예: 마지막 줄) 아래에 추가 공백이 있는 것을 발견했습니다. 추가 공백의 높이는 내 버튼 높이(50px)와 일치합니다. </p>
<p> 또한 arrowUp div 태그를 둘러싸기 위해 별도의 div 태그를 추가해 보았지만 간격은 줄어들었지만 여전히 작지만 눈에 띄는 공백이 있습니다. </p>
<p>추가 공백을 피할 수 있는 방법이 있는지 궁금합니다. </p>
<pre class="brush:css;toolbar:false;">#arrowUp {
위치: 끈적끈적함;
너비: 50px;
하단: 120px;
배경: #699462;
테두리 반경: 10px;
종횡비: 1;
여백 왼쪽: 자동;
오른쪽 여백: 20px;
// 여백-하단: 150px;
}
#arrowUp a {
콘텐츠: "";
위치: 절대;
삽입: 25%;
변환: 변환Y(20%) 회전(-45deg);
테두리 상단: 5px 솔리드 #fff;
테두리 오른쪽: 5px 단색 #fff;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<p> 첫 번째 줄. </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></pre>
<p><br /></p>
