jineecode

footer 을 항상 바닥에 놓기 (2) 본문

CSS

footer 을 항상 바닥에 놓기 (2)

지니코딩 2021. 5. 7. 17:15

footer를 항상 바닥에 놓는 법을 몇 달 전 포스팅 한 적이 있는데 react로 들어가니 또 말썽이 생겨서 (#root, .App .wrap 까지 점점 깊게 들어가니까 계속 height를 적용해줘야 하는 경우 발생하고 컴포넌트가 많으면 스타일을 다루기 힘들어진다.) 다른 방법을 강구해보았다. 

 

jineecode.tistory.com/103?category=818703

 

footer 을 항상 바닥에 놓기

content의 높이가 작으면 footer 가 아래에 있지 않고 애매하게 중간에 있는 경우가 있다. 관리자도구를 확인해보면 html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 html의 height가 auto로 늘

jineecode.tistory.com

 

이전 글

 

 

 

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
  </head>
  <body>
    <div id="root">
      <div class="App">
       	<div class="wrap">
         <header></header>
         <main></main>
         <footer></footer>
        </div>
      </div>
    </div>
  </body>
</html>

 

.wrap은 개인 차가 있는데 나는 아직 wrap이 없으면 어색해서 wrap으로 감싸놓았다.

 

 

index.css

html,body{ 
  margin:0; 
  padding:0;
  width:100%; 
  height:100%;
}

 

초기에 html, body 에 height 100%를 주는 것은 똑같다.

 

 

App.css

.wrap {
  display: flex; 
  min-height: 100vh; 
  flex-direction: column;
}

main {
  flex: 1;
}

.wrap

 wrap의 display를 flex 해주고 세로 배열을 해준 뒤 최소 높이를 100vh를 준다. 이렇게 하면 <header><main><footer>구역이 세로로 정렬이 된다.

 

main

 flex: 1을 준다. main부분이 flex-grow 1만큼의 공간 정도를 차지한다.

 

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

 

 

결과:

 

 

'CSS' 카테고리의 다른 글

visibility 의 hidden 과 display 의 none 차이점  (0) 2021.04.06
Why <textarea> and <textfield> not taking font-family and font-size from body?  (0) 2021.03.29
nav 높이가 필요 이상으로 낮아질 때 가려지는 현상  (0) 2021.03.26
@font-face unicode-range 사용법  (0) 2021.03.24
footer 을 항상 바닥에 놓기  (0) 2021.03.24
'CSS' Related Articles more
Comments