절대 자식 div doesnt 크기 스케일링에 상대 부모 div

Question

나는 1000 시간 이상 물어 질문을 가지고, 나는 전체 아침 독서 simulair 질문을 보냈다하지만 그냥 캔트 내 고정 사람이 나를 도울 수 있기를 바랍니다.

이

내 데모이다 http://jsfiddle.net/skunheal/4qx6a/1/

#one{ 
width:100%; 
min-height:100%; 
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg'); 
background-attachment:fixed; 
color:#fff; 
} 

#two{ 
width:100%; 
min-height:100%; 
background-color:transparent; 
position:relative 
} 

#content{ 
min-height:60%; 
position: absolute; 
bottom:0px; 
background:#ff9900; 
} 

I 3 명 div가 있고, 모두 100 % 신장 제 DIV (div.one)을 가지는 제 DIV (div.two)에 고정 부착되어 화상을 보유 절대 및 하부 위치에서 그 오렌지 텍스트 상자 DIV (div.container)는 : 0 픽셀 그래서 div.two의 풋 스틱. div.two는 트랜스 패 런트 한 배경을 가지고 있습니다. (투명하지 않도록 설정 한 것 같습니다.)

이제 창 크기를 조절하면 오렌지색 상자 (div.content)가 위쪽으로 확장되기 시작합니다. 텍스트는 즉시 사업부 2 단지가는 계속되어 자사의 전체 높이와 레 공간 horizantal하지만이 있고 나는 그것이 DIV 하나에 자신을 아래로 밀어 자신의 prant 더 큰 div.two 만들 TP 싶어하지만, div.one을 오버랩하는 시작합니다.

javascript를 사용하지 않고이를 수행 할 수있는 방법을 찾을 수 없으므로 어떻게 해결할 수 있습니까?

Answer 1

나는 비슷한 것을 만들었습니다. 귀하의 질문을 올바르게 이해한다면 이것은 잘 작동합니다.

HTML

<div id="one"></div> 
<div id="two"> 
    <div id="content"></div> 
</div> 
<div id="three"></div>  

CSS

* { 
    margin:0; 
    padding:0; 
} 
body, html { 
    height:100%; 
} 
#one { 
    width:100%; 
    height:100%; 
    background:pink; 
} 
#two { 
    position:relative; 
    width:100%; 
    height:100%; 
    background:transparent; 
} 
#content { 
    width:100%; 
    background:grey; 
    border-top:3px solid black; 
    position:absolute; 
    bottom:0; 
    min-height:60%; 
} 
#three { 
    width:100%; 
    height:100%; 
    background:green; 
} 

는 Fiddle Link

Answer 2

http://jsfiddle.net/4qx6a/2/

상대 위치 일하는. 각 하나는 윈도우의 전체 높이를 차지하려는 경우가 아니면

BTW, 컨테이너 및 내부에 하나 이상의에 min-height:100%을 설정하면, 아마 원하는 효과를 않습니다.