CSS를 사용하여 바닥글을 하단에 고정하는 방법은 무엇입니까?

CSS를 사용한 바닥글 위치 지정 마스터하기: 하단에 고정

웹 페이지를 만들 때 바닥글이 바닥에 고정되어 있는지 확인하세요. 브라우저는 공통적인 과제를 제시합니다. 솔루션을 자세히 살펴보고 특정 코드를 해결하고 이 딜레마를 극복하는 데 도움이 될 수 있는 기술을 탐색해 보겠습니다.

종종 부족한 접근 방식 중 하나는 바닥글 위치를 상대 위치로 설정하는 것입니다. 이 상대 위치 지정만으로는 바닥글을 바닥에 고정하는 데 충분하지 않습니다.

대신 절대 위치 지정을 사용해 보세요. 방법은 다음과 같습니다.

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

위치를 절대값으로 설정하면 바닥글이 문서의 일반적인 흐름에서 분리됩니다. 너비가 100%이면 브라우저의 전체 너비에 걸쳐 있고, 하단 속성을 0으로 설정하면 맨 아래에 고정됩니다.

또는 절대 위치와 유사한 고정 위치 지정을 사용할 수도 있습니다. 위치를 지정하지만 사용자가 페이지를 스크롤하는 경우에도 요소를 제자리에 유지합니다. 그러나 고정 위치 지정은 모든 브라우저, 특히 Internet Explorer와 호환되지 않을 수 있습니다.

특정 코드에서 바닥글 스타일을 다음과 같이 수정하세요.

<code class="CSS">#Footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #004669;
    font-family: Tahoma, Arial;
    font-size: 0.7em;
    color: White;
    height: 4em;
}</code>

이 변경 사항을 적용하면 이제 페이지 콘텐츠 길이에 관계없이 브라우저 하단에 단단히 고정된 바닥글이 있습니다.

위 내용은 CSS를 사용하여 바닥글을 하단에 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!