CSS 레이아웃의 최소 높이 활용 - 최소 높이는 BOX의 최소 높이를 설정할 수 있으며, 콘텐츠가 작은 경우 BOX의 높이도 일정하게 유지할 수 있으며, 최소 높이를 초과하면 자동으로 아래쪽으로 확장됩니다. BOX의 최소 높이를 설정할 수 있습니다. 최소 높이는 콘텐츠가 적을 때 BOX의 높이를 일정 수준으로 유지할 수 있습니다. 그러나 지금까지는 높이를 초과하면 자동으로 아래로 늘어납니다. Opera와 Mozilla만 지원합니다. IE7도 지원하기 시작했지만 IE7은 테스트 단계 등입니다. MS가 특정 버전과 함께 번들로 제공하지 않는 한 공식 버전이 일반 대중에게 출시되기까지는 오랜 시간이 걸릴 수 있습니다. 운영 체제에서 기존 기준(IE6 80-90%)에서 최소 높이를 어떻게 합리적이고 효과적으로 사용할 수 있습니까?
BOX가 두 개 있다고 가정하면 최소 높이는 150PX가 되어야 합니다.
CSS
다음은 인용문입니다:
인용된 내용은 다음과 같습니다. div.box1,div.box2{ xhtml |
다음은 인용문입니다:
<div>IE에서는 최소 높이가 150px로 유지되지 않습니다</div>
<div>최소 높이는 BOX의 최소 높이를 설정할 수 있으며, 콘텐츠가 작을 경우 BOX의 높이도 일정하게 유지할 수 있습니다.</div>
현재 효과는 IE에서 최소 높이가 150px로 유지되지 않는다는 것입니다.
해결책
IE의 높이 설정
다음은 인용문입니다:
* html div.box1,* html div.box2{높이: 150px;}
Wellstyled.com의 솔루션은 CSS 속성 선택기(Attribute Selectors)를 사용하는 것입니다.
다음은 인용문입니다:
div.box1,div.box2{......높이: 150px;}
/* IE는 최소 높이를 유지하기 위해 이에 의존하며, 이를 초과하면 자동으로 아래쪽으로 확장됩니다. */
div[class].box1,div[class].box2{높이: 자동;}
/* 클래스 선택기(클래스) 속성이 있는 DIV 객체 */
당연히 IE는 이 높이 읽기를 지원하지 않습니다. 적용 가능한 경우: 검색, 기사 및 기타 페이지(100% 높이가 사용되지 않으므로 발견된 콘텐츠가 적을 때 페이지가 너무 짧지 않습니다).