CSS 레이아웃 적응형 높이를 위한 궁극적인 방법

이 글은 CSS 레이아웃 적응형 높이의 궁극적인 방법을 주로 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

조판의 궁극적인 목표는 프로그래머가 빠르게 바인딩할 수 있도록 하는 것입니다. 최종 실제 데이터는 렌더링과 동일할 수 있지만 한자 모양의 페이지에서는 왼쪽 및 오른쪽 열의 높이가 불확실한 경우가 종종 있으므로 두 열에 맞게 조정해야 합니다. 각 열의 높이에 대한 해결 방법을 참조하세요. 열(어떤 열의 높이가 같은지 미리 판단할 수 없음)은 모든 디자이너가 추구하는 목표입니다. 일반적인 관행에 따르면 대부분의 방법은 배경 이미지 채우기 및 JS 스크립트를 추가하여 열 높이를 만드는 방법을 사용합니다. 이 기사에서는 동일한 높이를 갖는 열의 문제를 해결하기 위해 컨테이너 오버플로 부분 숨기기를 기둥의 음수 하단 경계와 양수 내부 패치와 결합하는 방법을 소개합니다.

먼저 코드를 살펴보세요:

#wrap{
 overflow: hidden;
 }

#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }

구현 원칙:

블록 요소는 컨테이너에 포함되어야 합니다.

오버플로 적용: 컨테이너의 요소에 숨겨집니다.

열의 블록 요소에 padding-bottom(충분히 큰 값)을 적용합니다.

열의 블록 요소에 margin-bottom(충분히 큰 값)을 적용합니다.

padding-bottom은 열을 동일한 높이로 늘리고 음수 margin-bottom은 하단의 시작 위치로 되돌립니다. 동시에 오버플로 부분은 숨겨집니다.

모든 브라우저와 호환됩니다.

IE Mac 5

매우 정확하므로 위 코드를 필터링하세요.

/*\*/
#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }
/**/

Opera

1. Opera7.0-7.2는 오버플로 부분을 올바르게 지울 수 없으므로 다음을 추가해야 합니다.

/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/

2. Opera8에는 오버플로: 숨김 처리에 버그가 있으며 다음 코드를 추가해야 합니다.

/*\*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important; 
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important; 
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/

3.Opera9 B2는 버그 8을 수정하고 있습니다.

테스트 환경: IE5.01, IE5.5, IE6.0, Firefox1.5, Opera8.5, Netscape 7.2를 통과했습니다.

위 내용은 CSS 레이아웃 적응형 높이를 위한 궁극적인 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!