CSS의 단순성은 학습의 용이성에 있으며, CSS의 어려움은 더 나은 솔루션을 찾는 데 있습니다. CSS의 세계에는 완벽함이라는 것이 없는 것 같습니다. 따라서 지금 소개하는 CSS는 절대적인 바닥이고, 지금까지 본 솔루션 중에서 가장 완벽한 솔루션일 뿐입니다.
먼저 이 CSS 하단 레이아웃 솔루션을 사용하는 이유에 대해 이야기해 보겠습니다.
페이지를 만들 때, 페이지 내용이 너무 작아서 한 화면의 창 영역을 다 채울 수 없을 경우, 일반적인 레이아웃에 따르면 아래 그림처럼 보입니다(즉, 하단 내용이 위치하지 않습니다) 창 하단에 있지만 공백이 많이 남아 있습니다.
이는 불완전함을 찾는 디자이너에게는 보기 흉한 일입니다. 인터넷에 해결방법이 여러가지 있는데, 창 높이를 바꾸면 하단과 본문이 겹치는 버그. 창 높이를 변경하려고 애쓰는 사람은 많지 않지만 디자인은 완벽에 관한 것입니다.
제가 찾은 상대적으로 완벽한 방법은 외국 디자인 전문가가 순수 CSS를 사용하여 달성할 수 있는 것입니다. 텍스트 내용이 작을 때 하단은 창 하단에 위치합니다. 창 높이를 변경할 때 겹치는 문제는 없습니다.
이 CSS를 만든 사람도 이 CSS 하단 레이아웃 솔루션을 소개하기 위해 웹사이트를 만들었습니다. 특허를 출원했는지는 모르겠네요 :)
HTML 코드:
참고: 이 레이아웃을 사용하기 위한 전제 조건은 바닥글이 일반 div 컨테이너 외부에 있어야 하며, 다른 모든 콘텐츠는 일반 레이어를 사용한다는 것입니다. 다른 형제 레이어를 실제로 추가해야 하는 경우 이 형제 레이어는 절대 위치 지정을 위해 position:absolute를 사용해야 합니다.