집 >웹 프론트엔드 >CSS 튜토리얼 >Sticky Footer의 절대 하단에 대한 두 가지 일반적인 예에 대한 자세한 설명

Sticky Footer의 절대 하단에 대한 두 가지 일반적인 예에 대한 자세한 설명

小云云원래의: 2017-12-23 13:09:572025검색

이 글에서는 Sticky Footer의 절대하위를 자세히 설명하기 위해 주로 두 가지 루틴을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

절대 하단 또는 고정 바닥글은 오래되고 고전적인 페이지 효과입니다.

페이지 내용이 화면을 초과하면 바닥글 모듈이 일반 페이지처럼 내용 아래로 밀려나고 스크롤 막대를 드래그하여

페이지 내용이 화면 높이보다 작은 경우 하단 여백이 0인 고정 위치와 마찬가지로 바닥글 모듈이 화면 하단에 고정됩니다.

1. 클래식 루틴

이 루틴의 아이디어는 콘텐츠 영역에 min-height: 100%를 설정하고 바닥글을 화면 하단으로 밀고

바닥글에 margin-top을 추가하는 것입니다. 그 값은 음수 값입니다.

HTML ：

<p class="wrap">
  <p class="content">
    <p>填充内容</p>
  </p>
</p>
<p class="footer">
  <p>这是页脚</p>
</p>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

주의해야 할 점은 콘텐츠 영역의 패딩, 즉 바닥글의 높이와 여백은 일관되어야 합니다

이 작성 방법의 호환성은 매우 좋으며 실제 테스트에서는 IE7에서도 정상적으로 작동합니다. 표시

하지만 페이지의 기본 레이아웃에 다른 호환성 문제가 있는 경우 Sticky Footer 이에 상응하는 수정이 필요합니다

2. Flexbox

CSS3가 프런트엔드에 변화를 가져왔다고 해야 할까요, 그중 Flexbox는 웹페이지 레이아웃에도 변화를 가져왔습니다

하지만 호환성으로 인해 중국에서 Flexbox 홍보가 제한됩니다. Flexbox가 프런트 엔드 레이아웃의 주요 트렌드라는 것은 부인할 수 없습니다

HTML:

<p class="content">
  <p>填充内容</p>
  <hr />
</p>
<p class="footer">
  <p>这是页脚@WiseWrong</p>
</p>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

클래식 루틴과 비교하면 첫 번째는 HTML 부분은 더 이상 랩 컨테이너가 필요하지 않습니다

그러면 CSS 부분은 단 4줄의 코드만으로 한때 한 세대를 괴롭혔던 문제가 해결되었습니다

그리고 Flexbox를 사용하면 그럴 필요가 없습니다. 페이지 레이아웃을 더 유연하게 만들기 위해 바닥글의 높이를 제한해야 합니다

물론 단점도 분명합니다. IE10 이상 브라우저만 플렉스 레이아웃을 지원합니다

Sticky Footer의 절대 하단에 대한 두 가지 일반적인 예에 ​​대한 자세한 설명

관련 기사

Sticky Footer의 절대 하단에 대한 두 가지 일반적인 예에 대한 자세한 설명