고정 바닥글 튜토리얼의 CSS 구현-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

고정 바닥글 튜토리얼의 CSS 구현

小云云

Jan 27, 2018 am 10:10 AM

sticky

본 글에서는 CSS로 Sticky Footer를 구현하기 위한 샘플 코드에 대한 관련 정보를 주로 소개하고 있는데, 편집자 입장에서 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

일명 "고정 바닥글"은 새로운 프런트 엔드 개념 및 기술이 아닙니다. 이는 웹 페이지 효과를 의미합니다. 페이지 내용이 충분히 길지 않으면 바닥글이 브라우저 창 하단에 고정됩니다. 내용이 충분히 길면 바닥글이 페이지 맨 아래에 고정됩니다. 그러나 웹페이지의 내용이 충분히 길지 않으면 하단 바닥글은 브라우저 창 하단에 그대로 유지됩니다.

구현 방법

1 콘텐츠 부분의 하단 여백을 음수로 설정하세요

이것은 좀 더 일반적인 사용법입니다. 콘텐츠 부분의 최소 높이를 다음으로 설정하세요. 100%로 설정한 뒤 콘텐츠 부분의 하단 여백 값을 음수로 설정하면 높이가 만족되지 않을 때 바닥글을 창 하단에 유지하고, 높이를 초과하면 밀어내는 효과를 얻을 수 있습니다.

<body>
  <p class="wrapper">
      content
    <p class="push"></p>
  </p>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  /* 等于footer的高度 */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

로그인 후 복사

이 방법을 사용하려면 컨테이너에 추가 자리 표시자 요소(예: .push)가 필요합니다.

.wrapper의 margin-bottom 값은 .footer의 음수 높이 값과 일치해야 합니다. 이것은 사실이 아닙니다.

2. 바닥글 상단 여백을 음수로 설정하세요

컨테이너 하단 여백을 음수로 사용할 수 있으니 상단도 음수 여백을 사용해도 되나요? 확신하는.

콘텐츠 외부에 상위 요소를 추가하고 콘텐츠 부분의 하단 패딩을 바닥글 높이 값과 동일하게 만듭니다.

<body>
  <p class="content">
    <p class="content-inside">
      content
    </p>
  </p>
  <footer class="footer"></footer>
</body>html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

로그인 후 복사

그러나 이 방법은 이전 방법과 동일하며 불필요한 html 요소가 추가로 필요합니다.

3. Flexbox 레이아웃 사용

위 세 가지 방법의 바닥글 높이는 고정되어 있습니다. 일반적으로 이는 웹 페이지 레이아웃에 도움이 되지 않습니다. 콘텐츠가 고정된 크기를 초과하면 모두 탄력적입니다. 높이 레이아웃이 깨집니다. 그래서 바닥글은 flexbox를 사용해서 높이를 더 크게, 더 작게, 더 아름답게 만들 수 있어요~(≧∇DF)

<body>
  <p class="content">
    content
  </p>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

로그인 후 복사

위에 헤더를 추가하거나 아래에 더 많은 요소를 추가할 수도 있습니다. 다음 기술 중 하나를 선택하십시오.

flex: 1 콘텐츠(예: .content)의 높이를 확장 가능하게 만듭니다.
margin-top: auto

Flexbox에 대한 전체 가이드가 있습니다(영어). ) 》그렇습니다~

4.absolute

바닥글이 항상 기본 컨테이너의 예약된 자리 표시자 위치에 위치하는 한 절대 위치 지정을 처리하는 일반적인 솔루션이어야 합니다.

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

로그인 후 복사

이 솔루션은 HTML과 본문의 높이를 100% 지정해야 하며, 콘텐츠의 패딩 하단은 바닥글 높이와 일치해야 합니다.

5.calc

계산 함수 calc를 통해 (창 높이 - 바닥글 높이)를 계산하여 콘텐츠 영역에 최소 높이를 부여하며, 코드 양이 가장 적습니다. 가장 간단합니다.

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

로그인 후 복사

calc()와 vh 단위의 호환성을 고려할 필요가 없다면 이것이 이상적인 구현입니다. 같은 문제는 바닥글의 높이 값이 콘텐츠에서 계산된 값과 일치해야 한다는 것입니다.

6. table

table 속성을 사용하면 페이지가 테이블 형식으로 표시됩니다.

<p class="wrapper">
    <p class="content"><!-- 页面主体内容区域 --></p>
    <p class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></p>
</p>html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

로그인 후 복사

테이블 솔루션을 사용할 때 일반적인 스타일 제한이 있다는 점에 유의해야 합니다. 일반적으로 여백, 패딩, 테두리와 같은 속성은 기대에 미치지 못합니다. 저자는 이 솔루션의 사용을 권장하지 않습니다. 물론 문제는 해결될 수도 있습니다. 테이블에 다른 스타일을 쓰지 마십시오.

7. 그리드 그리드 레이아웃을 사용하세요

grid는 flexbox보다 훨씬 새롭고 더 간단합니다. "그리드에 대한 전체 가이드(영어)"도 있습니다~

<body>
  <p class="content">
    content
  </p>
  <footer class="footer"></footer>
</body>html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

로그인 후 복사

안타깝게도 인터넷 그리드 레이아웃입니다. 현재는 Chrome Canary 및 Firefox Developer Edition 버전만 지원합니다.

요약

작가는 프로젝트에서 위의 구현 솔루션을 모두 시도했습니다. 각 구현 방법은 실제로 유사하며 자체적인 장단점도 있습니다. 일부 솔루션에는 제한적인 문제가 있으며 고정된 바닥글 높이가 필요합니다. 일부 솔루션에는 추가 요소나 해킹 방법을 추가해야 합니다. 학생들은 페이지의 특정 요구 사항에 따라 가장 적합한 솔루션을 선택할 수 있습니다.

물론 기술은 지속적으로 업데이트되고 있으며 다양하고 더 나은 솔루션이 많이 있을 수 있습니다. 하지만 더 나은 사용자 경험을 향한 모든 사람의 궁극적인 목표는 동일하다고 생각합니다!