HTML과 CSS를 사용하여 웹페이지 하단에 바닥글을 수정하는 방법은 무엇입니까?

HTML과 CSS를 사용하여 페이지 하단에 바닥글 고정

질문의 요구사항은 웹페이지의 바닥글을 페이지 하단에 고정하는 것입니다. 화면 크기에 상관없이 페이지 하단에 표시됩니다.

이 문제를 해결하기 위해 CSS의 position: 고정 속성을 사용하겠습니다. 이 속성을 사용하면 문서의 흐름이 아닌 뷰포트를 기준으로 요소의 위치를 ​​지정할 수 있습니다. 또한 페이지 하단에 바닥글을 배치하기 위해 하단 속성을 0px로 설정하겠습니다.

추가로 바닥글의 높이도 전체 뷰포트를 차지하지 않도록 설정해야 합니다. . 이 예에서는 높이를 50px로 설정합니다.

다음은 바닥글에 대해 업데이트된 CSS 스타일입니다.

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

바닥글 위의 콘텐츠가 겹치지 않도록 하려면 , 기본 콘텐츠 아래에 공간을 추가해야 합니다. 이는 본문 요소의 margin-bottom 속성을 바닥글 높이보다 크거나 같은 값으로 설정하여 달성할 수 있습니다. 이 예에서는 margin-bottom을 50px로 설정합니다.

본문에 대해 업데이트된 CSS 스타일은 다음과 같습니다.

body {
    margin-bottom: 50px;
}

이러한 변경 사항으로 바닥글은 이제 다음으로 고정됩니다. 화면 크기에 관계없이 페이지 하단에 표시됩니다.

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