항상 레이아웃을 짤 때 어떤 방식으로 할지 항상 고민을 하는데, 의도치 않은 css가 나오는 것 만큼 스트레스가 받는 일이 있지는 않은것같다.
이번에 레이아웃을 짜면서 처음으로 의도한 대로 완벽하게 공간을 메꾸는 것을 보고 앞으로는 이런 식으로 계속 해봐야겠다는 생각을 하고 있다.
참고로, fit-content와 auto가 caniuse로 확인해보니 IE 11을 지원을 안한다... 그래서 다른 방식을 생각해봤다.
사실상 레이아웃에서 가장 문제가 되는게 헤더와 메인끼리의 충돌인데,
헤더의 높이만큼 메인 컨테이너를 줄여서 잡아주면 가장 근본적인 레이아웃이 완성된다.
이때 height:1px을 주고 min-height:을 계산값으로 넣어준 이유는, 만약 Main의 자식컨테이너에 부모의 100%를 주겠다고 했을 때에 부모에 높이가 존재하지 않는다고 생각하는 모양인지 자동적으로 컨텐츠 크기만큼으로 높이가 정해지기 때문이다... 진짜 이해안되는 레이아웃 방식이지만 일단 그렇다.
부모의 높이에 height 1px이 없을때
부모의 높이에 height 1px이 정해져있을 때
이렇게 해두면 일단 최소크기는 부모인 main의 크기로 잡히며, 만약 자식이 자동으로 넘쳐날 경우 그 크기에 맞춰서 height이 늘어난다.
min-height으로 설정하지 않았고 height:100%로 설정했을 경우, 브라우저는 첫 랜더링 당시에 해당 자식 컨테이너의 크기를 그냥 부모의 100%, 즉 Main 컨테이너의 첫 뷰포트 크기로 고정되기 때문에 자식이 늘어난 만큼을 커버해주지 못한다. 그래서 반드시 min-height으로 설정해줘야 한다.
별거 아닐수 있지만, 정말 css때문에 스트레스를 너무 받아서 다 때려치고 싶었는데 일단 어떻게든 정리가 된 것 같아서 앞으로는 이 방식을 사용하려고 한다.
까먹지 않게 정리해두고 담에 짤때에도 이렇게 해봐야겠다.
물론, 사용하다보면 또 어딘가에서 레이아웃이 깨지겠지만.. 그건 그때가서 좀 생각해보고 일단 이렇게 가자... 진짜 IE만 아니었어도 fit-content로 밀어버리고 싶은 마음이 굴뚝같았다.