>웹 프론트엔드 >CSS 튜토리얼 >모든 브라우저에서 바닥글이 브라우저 창 하단에 유지되도록 하는 방법은 무엇입니까?

모든 브라우저에서 바닥글이 브라우저 창 하단에 유지되도록 하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-10-31 09:20:011025검색

How to Ensure a Footer Stays at the Bottom of the Browser Window in All Browsers?

브라우저 하단에 바닥글을 배치하는 방법

CSS에서 HTML 바닥글을 브라우저 창 하단에 배치하면 공통의 도전이 될 것입니다. 방법은 다음과 같습니다.

한 사용자가 바닥글 위치를 지정하기 위해 다양한 방법을 시도했지만 소용이 없었던 경험을 공유했습니다. 그들은 여백 및 위치 지정과 같은 속성이 포함된 HTML 구조와 관련 CSS 코드를 제공했습니다.

코드를 검토한 결과 위치 지정 속성에 문제가 있는 것이 분명했습니다. 사용자는 바닥글 위치를 "상대적"으로 설정하고 기본 클래스도 "상대적"으로 설정했습니다.

브라우저 하단에 바닥글을 올바르게 배치하기 위해 사용자는 다음 스타일을 구현했습니다.

<code class="css">#Footer {
  position: absolute;
  width: 100%;
  bottom: 0px;
}</code>

이러한 설정을 사용하면 바닥글이 창 하단에 절대적으로 배치되어 콘텐츠 높이에 관계없이 그대로 유지됩니다.

"위치:고정" 설정은 IE에서는 작동하지 않았지만, 파이어폭스에서 했어요. 궁극적으로 제공된 "bottom:0" 절대 위치 지정 방법은 두 브라우저 모두 바닥글을 브라우저 하단에 성공적으로 배치했습니다.

위 내용은 모든 브라우저에서 바닥글이 브라우저 창 하단에 유지되도록 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.