2011-08-09 10 views
12

나는 컨테이너의 높이의 100 %를 차지하는 요소를 만들기 위해 노력하고 있는데 컨테이너 요소에는 최소 높이만 지정되어 있습니다. 불행하게도이 작업을 수행 할 때 높이 지시문은 무시됩니다. Here is an example. 빨간색 "b"div는 전체 부모를 채워야합니다. Internet Explorer 7, Chrome 또는 FF3.6에서는 작동하지 않습니다.CSS 최소 높이의 컨테이너 100 % 높이

컨테이너에 "높이 : 1px"가 있으면 "a"div 다음 "b"가 "a"의 전체 높이까지 늘어납니다. See here. 하지만 이것은 FF3.6 및 IE7에서만 가능하며 Chrome에서는 그렇지 않습니다. 그래서 나는 여기서 뭔가 잘못하고있는 것 같아요.

나는 이것이 보이지 않는 해결책이 있어야한다는 공통된 문제라고 생각합니다. 이 경우 스트레치 - 높이를 달성하는 가장 좋은 방법은 무엇입니까?

+0

상위 컨테이너의 높이가 지정되어야합니다. 최소 높이 만이 아닙니다. – Kyle

답변

11

CSS는 하위 요소의 높이가 상위 요소의 지정된 높이의 100 %임을 의미합니다. 부모의 높이를 지정하지 않으면 100 %는 아무 것도 의미하지 않습니다. 따라서 작동하지 않습니다.

당신이 아이의 부모에 position:relativeposition:absolute를 사용함으로써 달성 될 수 원하는 :

http://jsfiddle.net/57EZn/25/

그것은 아름다운 해결책은 아니지만 당신이 후에 어떤 않습니다.

+0

아, 예, 제가 기억하기에이 해킹은 때때로 다른 레이아웃 문제를 해결하는 데 사용됩니다. 위치 규칙을 가지고 놀려고했지만 올바른 조합을 찾을 수 없습니다. 논리적으로, 왜 설정 위치가 내부 div의 높이를 변경해야하는지 모르지만, 분명히 작동하며이 솔루션을 사용할 수 있습니다. 감사. – waxwing

+0

높이를 변경하는 것은 '위치 : 절대'뿐만 아니라 높이는 지정된 '상단'및 '하단'으로 변경됩니다. 이렇게하면 자식 요소가 부모 요소에 대해 상대적으로 지정한 상단 및 하단 위치에 "부착"됩니다. 이 경우의 'bottom : 0'은 "parent within within possible"을 의미합니다. 즉, "부모의 신장과 맞는 크기". – Bazzz

+0

이제 알겠습니다. 즉, 내부 div에서 "height : 100 %"지시문을 제거하면 상단 및 하단이 작업을 수행하기 때문에 작동합니다. – waxwing