[flex]footer를 바닥에 내리고싶다...!

2551 단어 htmlCSSCSS

포트폴리오 제작 중 이놈의 footer 때문에 골머리를 앓기 시작.
flex를 이용해서 제작중이었기 때문에 display 속성을 통일하고 싶어서
footer를 flex를 이용하여 바닥에 챱-챱- 붙히고 싶었음.

구글링으로 뚜따뚜따- 한 결과

우선은

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

을 적용하고

화면에 보이는 구조가 수직으로 쌓인다면

display : flex;
flex-direction : column;
height: 100%

그리고 100프로 꽉- 차게 만들고 싶으니 내용이 들어갈 section부분에

flex : 1

즉 footer size에 관한 설정은 1도 필요 없음!

완성 코드

<style>
	html, body{
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
}
	#wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  section{
      flex: 1;
  }
</style>

좋은 웹페이지 즐겨찾기