[flex]footer를 바닥에 내리고싶다...!
포트폴리오 제작 중 이놈의 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>
Author And Source
이 문제에 관하여([flex]footer를 바닥에 내리고싶다...!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@joena94/flexfooter를-바닥에-내리고싶다저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)