푸터 고정, 순수 CSS 솔루션

[cosdesign (Cos)]

디스커스(Discourse) 유저 여러분, 안녕하세요.

저는 여러분께 제 스티키 푸터(sticky footer) 솔루션을 공유하고자 합니다. JS는 필요 없으며(이 요청에 대한 대안) 푸터의 높이를 알고 있다는 것을 전제로 합니다. 저는 콘텐츠와 푸터 사이에 여백을 확보하기 위해 제 푸터에 100px를 추가로 설정했습니다.
여러분의 푸터가 여러 컬럼으로 구성된 더 큰 크기라면, 모바일 탭에서 다른 고정 높이를 설정해야 합니다.

1단계: 공통 CSS 탭에 아래 코드를 붙여넣으세요

body {
  position: relative;
}

#main {
  margin-bottom: 350px; /* 푸터 높이와 같음 - 필요에 따라 변경하세요. 공통 탭과 모바일 탭 모두에서 적용 */
}

#sticky-footer {
  padding: 50px 0;
  background: var(--header_background);  /* 선택 사항 */
  color: var(--primary-medium); /* 선택 사항 */
  text-align: center; /* 선택 사항 */
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

2단계: </body> 탭으로 이동하여 푸터 HTML을 붙여넣으세요

예시:

<div id="sticky-footer">
  <div class="wrap">
      <!-- 여기에 푸터 콘텐츠 삽입 -->
  </div>
</div>

이것으로 끝입니다 . 이제 콘텐츠가 짧은 페이지에서도 푸터가 페이지 하단에 고정되어 표시됩니다.

콘텐츠가 짧은 페이지에서 우리의 푸터는 다음과 같이 보입니다:

그렇지 않다면, 다음과 같이 화면 중앙에 배치되었을 것입니다:

[codinghorror (Jeff Atwood)]

표준 Discourse 푸터 테마 구성 요소 대신 이것을 사용하는 이유는 무엇인가요?

[cosdesign (Cos)]

제프 씨, 알려주세요 … HTML과 CSS 코드가 추가로 필요할 때마다 컴포넌트를 설치해야 하나요?
이것은 "푸터를 만드는 법"에 대한 튜토리얼이라기보다는, 직접 푸터를 만들어보고 싶은 분들을 위해 페이지 하단에 푸터를 고정하는 간단한 대안 솔루션에 더 가깝습니다.

[codinghorror (Jeff Atwood)]

음, 제 생각은 가능한 한 테마 컴포넌트를 사용하도록 유도해야 한다는 겁니다. 저희 공식 컴포넌트이므로 전체적인 지원, 자동 업데이트 등을 받을 수 있거든요. @awesomerobot @Johani 그리고 @jordan.vidrine 님들은 어떻게 생각하시나요?

[awesomerobot (Kris)]

네, 공식 푸터 컴포넌트가 필요에 맞다면 우리가 최신 상태로 유지해 드리니 좋은 선택이죠. 하지만 다른 레이아웃을 원하는 분들도 있습니다.

과거에 저는 비슷한 작업을 해본 적이 있습니다… OP(질문자)와 유사한 과정입니다. #main-outlet의 높이를 뷰포트 높이(100vh)에서 푸터와 헤더 높이를 뺀 값으로 설정합니다. 이렇게 하면 짧은 페이지에서 푸터가 이제 정확히 맨 아래에 위치하게 됩니다.

#main-outlet {
  box-sizing: border-box; // 패딩을 높이 계산에 포함
}

<script type="text/x-handlebars" data-template-name="/connectors/below-footer/my-footer">
  My footer content
</script>

<script type="text/discourse-plugin" version="0.8">
    api.decoratePluginOutlet(
      "below-footer",
      (elem, args) => {
          let headerHeight = document.querySelector(".d-header").offsetHeight;
          let footerHeight = document.querySelector(".below-footer-outlet").offsetHeight;
          let mainOffset = headerHeight + footerHeight;
          
          document.querySelector("#main-outlet").style.minHeight = "calc(100vh - " + mainOffset + "px)";
      }
   );
</script>

이러한 요청이 자주 들어오므로, footer.html에 콘텐츠가 있거나 두 개의 푸터 플러그인 아웃렛 중 하나에 콘텐츠가 있는 경우 코어에서 자동으로 이와 같은 처리를 하는 것이 가치가 있을 것 같습니다.

[spectre (Spectre Zone)]

@cosdesign

1단계: 이 내용을 공용 CSS 탭에 붙여넣으세요

@cosdesign , 혹시 물어봐도 괜찮다면 그 CSS 탭이 어디에 있는지 알려줄 수 있을까요?

[JammyDodger]

기본 테마의 경우, CSS/HTML 편집 버튼을 통해 찾을 수 있습니다:

다만, 대신 테마 컴포넌트로 생성하는 것이 더 좋습니다. (설치 버튼을 클릭한 뒤, 내부에서 '새로 만들기’를 선택하세요)

Developing Discourse Themes & Theme Components 에 더 많은 정보가 있습니다

[spectre (Spectre Zone)]

@JammyDodger

기본 테마의 경우 CSS/HTML 편집 버튼을 통해 찾을 수 있습니다.

멋지네요