HTML에서 고정 바닥글을 만드는 방법은 무엇입니까?

바닥글을 페이지 하단에 고정하는 방법

HTML 페이지에서는 페이지 하단에 고정된 바닥글을 두는 것이 바람직한 경우가 많습니다. 콘텐츠 길이에 관계없이 페이지 하단에 표시됩니다. 그러나 때로는 스타일 문제로 인해 바닥글 요소가 전체 페이지 너비를 차지하지 못하거나 아래에 공백이 남지 않을 수도 있습니다.

이 문제를 해결하기 위해 널리 사용되는 솔루션은 '고정 바닥글' 기술입니다. 이 방법에는 본문 콘텐츠와 바닥글과 동일한 높이의 푸시 요소를 포함하는 래퍼 요소를 만드는 작업이 포함됩니다.

래퍼의 아래쪽 여백을 바닥글 높이와 동일한 음수 값으로 설정하면 푸시 요소가 페이지 하단으로 밀려났습니다. 이렇게 하면 페이지 길이에 관계없이 바닥글이 아래쪽 가장자리에 고정됩니다.

설명을 위해 다음 CSS 코드를 고려하세요.

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML 구조:

<div class='wrapper'>
  body goes here
  <div class='push'></div>
</div>
<div class='footer'>Footer!</div>

이 고정 바닥글 접근 방식을 구현하면 바닥글 요소가 페이지 하단에 고정되어 전체 페이지 너비를 채우고 원치 않는 흰색이 제거되도록 할 수 있습니다. 공간.

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