고정 바닥글 절대 바닥 방식-CSS 튜토리얼-php.cn

고정 바닥글 절대 바닥 방식

php中世界最好的语言

풀어 주다： 2018-03-21 09:51:49

원래의

1822명이 탐색했습니다.

이번에는 Sticky Footer의 절대 Bottom을 구현하는 방법을 알려드리겠습니다. Sticky Footer의 절대 Bottom을 구현하기 위한 주의사항은 무엇인가요?

저는 최근 다양한 수준의 업무 경험을 가진 여러 프런트 엔드 개발자를 인터뷰했습니다. 저는 절대적인 바닥이 무엇인지도 모르고, 그것을 달성하는 방법을 누구도 말해 줄 수 없습니다. 프런트 엔드 필드에는 좋은 것과 나쁜 것이 혼합되어 있습니다

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

페이지 내용이 화면을 초과하면 바닥글 모듈이 화면 아래로 밀려납니다. 콘텐츠는 일반 페이지처럼 스크롤 막대를 드래그해야 볼 수 있습니다

그리고 페이지가 화면 높이보다 작을 경우 바닥글 모듈은 고정 모듈처럼 화면 하단에 고정됩니다. 아래쪽 여백이 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 이상 브라우저에서만 Flex 레이아웃을 지원합니다

믿습니다. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!