바닥글을 페이지 하단에 유지 - flexbox 사용

4149 단어 footercssflexbox
TLDR - 마지막에. 하지만 개념을 이해하고 싶다면 미리 읽어보길 권한다.

html 본문의 마지막 태그인 경우에도 사이트의 바닥글이 페이지 하단에 머물지 않는 문제가 발생했습니까?

특히 웹 개발이 처음이라면 이 문제에 부딪히게 될 것입니다. 바닥 글을 맨 아래에 유지하는 방법이 있지만 대부분의 방법에는 일종의 주의 사항이 있습니다.
  • 위치: 절대(컨텐츠가 더 있는 경우 작동하지 않음, 바닥글이 고정되고 컨텐츠가 바닥글 뒤로 스크롤됨을 알게 됨).
  • 위치: 고정됨(바닥글을 항상 표시하려는 경우에만 사용).






    • 모든 크기의 장치에서 작동하고 탐색 모음 또는 바닥글의 고정 높이가 필요하지 않으며 부작용 없이 작동하는 flexbox를 사용하는 방법이 있습니다.

    브라우저 기본값 재설정



    CSS 프레임워크를 사용하지 않는 경우 일부 브라우저 기본 CSS를 재설정해야 합니다. 그렇지 않으면 브라우저가 자체 여백과 패딩을 페이지에 적용합니다.

      /* following style will be applied to every element */
  *, *::before, *::after{
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
  }
  /* write your own css after this part */


    페이지 구조



    html 본문은 이러한 종류의 구조를 따라야 합니다. <div> 대신 <main>를 사용할 수 있습니다.

    <body>
  <div class="pagewrap">
    <nav>...</nav>
    <main>...</main>
    <footer>...<footer>
  </div>
</body>


    기본적으로 페이지의 모든 콘텐츠를 div 안에 래핑하고 클래스 이름을 지정합니다.

    가변상자 사용



    display:flex 및 flex-direction:column을 기본 div(페이지의 다른 모든 요소 포함)에 추가합니다. 또한 해당 div가 뷰포트의 전체 높이를 차지하도록 해야 합니다. 아래 코드를 참조하십시오.

      .pagewrap{
    display: flex;

    /*vertically stack children*/
    flex-direction: column;

    /* expand to take full height of page */
    /* min-height overrides both height & max-height */
    min-height: 100vh; 

  }






    이제 해야 할 일은 가능한 한 많은 높이를 갖도록 요소를 늘리는 것입니다. 이렇게 하려면 flex-grow를 사용하십시오.

      main{
    flex-grow: 1;
  }






    TLDR :
  • 모든 본문 요소를 div 안에 래핑합니다.
  • 해당 div에 display: flex, flex-direction: column 및 min-height: 100vh를 지정합니다.
  • div/main 태그 안에 navbar 및 바닥글 이외의 요소를 래핑합니다.
  • 해당 div/main 태그에 flex-grow: 1을 지정합니다.

    • 그게 다야! 위의 그림에서 볼 수 있듯이 콘텐츠가 적거나 많더라도 작동합니다. 반응형으로 만드는 것에 대해 걱정할 필요가 없습니다.
    Django에서 자동 완성
    비교: 무제한 목록 성능(원시 JS, React, Mithril)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage