최소 높이의 최소 높이 CSS

Question

최소 높이 100 %를 가지며 최소 높이 100 % 이내의 한 div가 있어야합니다.

마크 업을 터치 할 수 없으므로 순수 CSS로 완료해야합니다. 그것은 또한 IE6에서 작동해야 + 그래서 나는 디스플레이를 사용하지 않습니다 : 테이블.

어떻게하면됩니까?

현재 높이, 100 %, 높이를 100 %로 설정 한 래퍼가 있습니다. 그러나 내부 div는 외부 div가 높이 설정을 필요로하므로 % 자체를 설정합니다.

이 문제를 해결하는 가장 좋은 해결책은 무엇입니까?

Answer 1

IE6을 지원해야하는 경우 최소 높이가 그림에서 벗어납니다.

다른 브라우저에서는 최소 높이를 사용하고 IE에서는 최소 높이가 아닌 높이를 설정하는 조건문을 추가 할 수 있습니다.

IE8 이상은 최소 높이를 지원합니다.

min-height를 지원하는 브라우저의 경우 실제로 min-height 선언을 중첩 할 필요가 없습니다. 바깥 쪽 요소에는 min-height 만 있으면되고 내부 요소에는 height가 사용됩니다.

예 : http://jsfiddle.net/dmyN6/

body, html { 
    height: 100%; 
} 

.a { 
    min-height: 100%; 
    background-color: blue; 
} 

.b { 
    height: 100%; 
    background-color: aqua;  
}