10일차: 적응형 높이_기본 튜토리얼

3열 레이아웃 끝에 바닥글 줄을 추가하여 저작권 등의 정보를 넣고 싶은 경우. 3열의 하단을 정렬해야 하는 문제가 발생했습니다. 테이블 레이아웃에서는 큰 테이블을 작은 테이블에 중첩하는 방법을 사용합니다. 이렇게 하면 세 개의 열을 쉽게 정렬할 수 있지만 div 레이아웃에서는 세 개의 열이 독립적으로 흩어져 있고 내용의 높이가 다르기 때문에 정렬하기가 어렵습니다. 실제로 div를 완전히 중첩하고 세 개의 열을 하나의 DIV에 넣어 하단 정렬을 달성할 수 있습니다. 다음은 구현 예입니다(흰색 배경 상자가 페이지를 시뮬레이션함).

본체

여기는 #header{ MARGIN: 0px; BACKGROUND: #ccd2de; HEIGHT: 60px;}

여기에는 #menu, #sidebar 및 #content가 포함된 #mainbox { MARGIN: 0px; BACKGROUND: #FFF }가 있습니다.

여기는 #메뉴입니다{ FLOAT: MARGIN: 2px 0px 0px 0px; BACKGROUND: #ccd2de;

여기는 #sidebar{ FLOAT: left; MARGIN: 0px; BACKGROUND: #F2F3F7; 170px }, 배경색은 #main

여기는 #content{ FLOAT: right; MARGIN: 1px 0px 2px 0px WIDTH: 400px;}

메인 콘텐츠는 다음과 같습니다. 높이는 콘텐츠에 따라 자동으로 조정됩니다.

메인 콘텐츠는 다음과 같습니다. 높이는 콘텐츠에 따라 자동으로 조정됩니다.

메인 콘텐츠는 다음과 같습니다. 높이는 콘텐츠에 따라 자동으로 조정됩니다.

여기는 #footer{ CLEAR: 0px 0px 0px 0px; BACKGROUND: #ccd2de;

이 예시 페이지의 메인 코드는 다음과 같습니다.

 

 

div>

특정 스타일 시트는 해당 섹션에 기록되어 있습니다. 핵심은 #mainbox 레이어가 #menu, #sidebar 및 #content의 세 레이어에 중첩되어 있다는 것입니다. #content의 컨텐츠가 증가하면 #content의 높이가 증가하고 #mainbox의 높이도 확장되며 #footer 레이어가 자동으로 아래로 이동합니다. 이는 높은 수준의 적응성을 달성합니다.
#menu와 #content가 "FLOAT: right;" 페이지의 오른쪽에 떠 있고, #sidebar가 #menu 레이어 "FLOAT: left;"의 왼쪽에 떠 있다는 점도 주목할 가치가 있습니다. 이는 부동 방법 위치 지정을 사용하여 이 효과를 얻을 수도 있습니다.

이 방법에는 또 다른 문제가 있습니다. 즉, 사이드바의 배경이 #sidebar 100%가 될 수 없다는 것입니다. 일반적인 해결책은 본문의 배경색으로 채우는 것입니다. (#mainbox 배경색은 Mozilla 등의 브라우저에서는 유효하지 않기 때문에 #mainbox 배경색을 사용할 수 없습니다.)

자, 메인 프레임워크가 구축되었습니다. 남은 작업은 여기에 벽돌과 타일을 추가하는 것뿐입니다. 다른 레이아웃을 시도해보고 싶다면 다음 기사를 읽어보는 것이 좋습니다.

CSS 레이아웃의 16가지 예

• onestab: 3열 복합 레이아웃 데모
• onestab: 자유롭게 늘릴 수 있는 3열 레이아웃
• 팁:
[onestab의 "P.I.E" 특집]

더 흥미로운 소개도 있으니 꼭 확인해보세요.