2022/04/28 height 100vh적용시 margin또는 padding bottom 적용이 안되는 문제

그렇다. height: 100vh를 넣으면 top margin/padding 값은 적용되나 bottom margin/padding 값은 적용되지 않는 것이다.

더 이상 스크롤바가 당겨지지 않는 슬픔이 밀려왔다.

그러나 height 100vh를 포기할 수 없었던 것은, 만약 콘텐츠가(여기선 더미 데이터들) 스크롤 이상으로 많지 않을 경우 배경이 비어서 뚫리는 문제가 발생하기 때문이다. height 100vh를 넣어서 배경색을 채워줘야지 이 문제를 해결할 수 있다. 그러나 height 100vh를 넣으면 bottom에 마진값이 적용이 안된다. 딜레마에 처한 나. 이런 저런 방법들을 고민해본 결과

height를 min-height로 바꾸었다.

그랬더니 됨.

min-height 100vh일 경우 100vh 이상 확장이 가능하나 height 100vh일 경우 그것이 불가능하기 때문에 bottom margin/padding 값이 적용이 안된 걸로 추측된다. (그런데 top 값은 왜 적용되냐구. 이 문제에 대해 토론 가능하신 분 댓글 달아주세요.)

CSS란...