HTML 페이지 하단에 고정 바닥글을 만드는 방법은 무엇입니까?

페이지 하단에 고정 바닥글 만들기

HTML에서 바닥글은 일반적으로 "바닥글"이라는 div 클래스로 표시됩니다. 페이지 하단의 이 요소를 수정하려면 특정 CSS 속성을 구현해야 합니다.

제공된 CSS 코드는 상대적으로 상위 값인 490px로 바닥글을 배치하는데, 이는 바닥글을 페이지에 고정하는 데 적합하지 않습니다. 맨 아래. 또한 코드는 너비 속성을 지정하지 않으므로 바닥글이 페이지 너비를 채우지 못합니다.

고정 바닥글을 만들려면 CSS 속성 조합을 사용할 수 있습니다. 일반적인 접근 방식 중 하나는 "고정 바닥글" 기술을 활용하는 것입니다. 구현 방법은 다음과 같습니다.

/* Sticky Footer by Ryan Fait */

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.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 */
}

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

이 기술을 사용하면 페이지 콘텐츠의 높이가 조정되더라도 바닥글 요소가 페이지 하단에 고정된 상태로 유지됩니다.

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