하위 div의 상속 크기가 아닌 div

Question

한 영역에서 다른 영역으로 응용 프로그램을 이동할 때 직면하게되는 문제를 이해하려고합니다. 이전에 격리 된 테스트 응용 프로그램에서 HTML을 테스트하고 있었기 때문에 제가 만족스러워하는 단계에 도달했습니다. 그래서 나는 그것을 올바른 장소에 통합하기 시작했습니다. 이 작업을 수행 할 때 div 요소가 더 이상 자식 나누기의 차원을 상속하는 것으로 보이지 않아 호기심 CSS 문제가 있음을 발견했습니다.

다음 코드도 문제를 설명하기 위해 JSFiddle을 만들었습니다.

뒤로 돌아 가면, 높이와 너비 (100 픽셀)로 하드 코딩 된 스타일 속성이있는 가장 바깥 쪽 div는 예상했던 계산 된 스타일을 가지고있는 것처럼 보입니다. 지금까지

해피. 높이와 너비에 대해 100 픽셀을 볼 수 있습니다.

자식 () div는 예상 한대로 하위 콘텐츠의 크기를 상속하는 것으로 보입니다. 높이와 너비는 100 픽셀입니다.

지금까지 올바른 행동.

그러나 이것은 내 CSS 지식이 떨어지는 곳입니다. 부모 인 div는 콘텐츠에서 모든 너비 및 높이 정보를 잃어 버리므로 사용자는 본 div의 크기가 기본적으로 0px가되고 내용이 숨겨져 있으므로 브라우저에서 아무 것도 볼 수 없습니다. 폭을 수행하고 높이가 부모 스타일 클래스를 가진 div 요소의 자식에서 상속되지 왜

내가 가진 문제이다.

HTML

<div class="grandparent"> 
    <div class="parent"> 
     <div class="child"> 
      <div style="height: 100px; width: 100px; background-color: black;">hello</div> 
     </div> 
    </div> 
</div> 

CSS

.grandparent { 
    height: auto; 
    position: absolute; 
    margin: 0; 
    overflow: auto; 
    display: block; 
    background-color: red; 
} 
.parent { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    display: block; 
    background-color: green; 
} 
.child { 
    height: auto; 
    position: absolute; 
    margin: 0; 
    overflow: auto; 
    display: block; 
    background-color: blue; 
} 

이 있지만, 위치에 대한

Answer 1

장점과 단점 : 절대; 빠른 회신 http://jsfiddle.net/CyubA/1/

.child { 
    height: auto; 
    position: relative; 
    margin: 0; 
    overflow: auto; 
    display: block; 
    background-color: blue; 
}