고정 된 높이를 가진 다른 DIV의 높이 DIV를 늘리십시오.

Question

나는 더 적은 이야기를했습니다. 희망을 당신이 이해할 것입니다. 문제는 높이가 고정 된 다른 DIV에서 100 % 높이의 DIV를 늘리면 제대로 늘어나지 않는다는 것입니다.

는 다음 작업을 예입니다 : jsfiddle

CSS :

.controlling-div { 
    width: 200px; 
    height: 200px; 
} 

.stretching-container-div { 
    width: 100%; 
    height: 100%; 
} 

.fixed-height-div { 
    height: 40px; 
    background-color: #ff8811; 
    border-radius: 20px; 
} 

.stretching-height-div { 
    height: 100%; 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

HTML :

<div class="controlling-div"><!-- width & height can be changed --> 
    <div class="stretching-container-div"><!-- 100%-container --> 
     <div class="fixed-height-div"></div><!-- fixed height --> 
     <div class="stretching-height-div"></div><!-- height 100% - fixed height --> 
    </div> 
</div> 

감사합니다!

Answer 1

사용 stretching-height-div이 스타일. 여기 높이는 100 %에서 40px (고정 높이 div의 높이)를 기준으로합니다.

잘 작동합니다. 여기에 a DEMO

.stretching-height-div { 
    height: -moz-calc(100% - 40px); /* Firefox */ 
    height: -webkit-calc(100% - 40px); /* Chrome, Safari */ 
    height: calc(100% - 40px); /* IE9+ and future browsers */ 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

Answer 2

jsfiddle

.stretching-height-div { 
    height: calc(100% - 40px); 
    background-color: #ff2266; 
    border-radius: 20px; 
}