100vh
-
[CSS] 콘텐츠의 길이와 상관 없이 footer 하단 고정CSS 2022. 6. 10. 13:39
🚩목표 콘텐츠의 길이와 상관 없이 footer를 하단에 고정시켜야 한다. header의 경우 스크롤을 내릴시 상단고정이 되어야 한다면 position:fixed를 사용하면 된다.하지만 footer의 경우 스크롤이 생길 때 항상 고정되어 있어 어색하다.position: absolute로 하단에 위치해보아도 콘텐츠가 길어져 스크롤이 넘어서면 하단에 위치하지 않게 된다. 💡방법 : min-height min-height를 이용해 화면에 꽉채우게 한다. height의 기본 속성은 auto이니 컨텐츠의 길이가 화면보다 짧으면 화면이 꽉차게 나오고 길다면 길이만큼 스크롤이 발생 Header Content Footer /* css */ * { box-sizing: border-box; } header { width:..