포트폴리오 제작 중 이놈의 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>