CSS는 - 전체 사용 가능한 높이를 줄

Question

난 다음 설치를

HTML을 가지고 :

<div id="resizable"> 
    <div id="fixHeightTop">Whatever</div> 
    <div id="problematicDiv">Whatever</div> 
    <div id="semiProblematicDiv">Whatever</div> 
    <div id="fixHeightBottom">Whatever</div> 
</div> 

CSS는 :

#resizable { 
    position: relative; 
} 

#fixHeightTop { 
    position: relative; 
    height: 10px; 
} 

#fixHeightBottom { 
    position: absolute; 
    height: 10px; 
} 

#problematicDiv { 
    position: relative; 
    float: left; 
    width: 80%; 
    overflow: auto; 
} 

#semiProblematicDiv { 
    position: relative; 
    float: right; 
    width: 20%; 
    overflow: auto; 
} 

#resizable 사업부는 (jQuery를) 크기를 조정할 수 있습니다. 내가해야 할 일은 problematicDiv과 semiProblematicDiv에 높이를 100 %로 지정하는 것입니다. - fixHeightTop height - fixHeightBottom height. 크기를 조정할 수있는 요소의 전체 높이로 확장 할 수 있습니다. 문제는 내가 할 수있는 방법을 찾아 낼 수 없다는 것입니다. height : 100 %를 사용하면 맨 아래 요소와 겹칩니다.

아이디어가 있습니까? 난 당신이 바로, 두 개의 고정 높이 DIV와 다른 두 div의이 차지 쇼를 갖고 싶어 이해하면 내가 아이디어가

Answer 1

는 position:absolute;

#problematicDiv { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 80%; 
    height: 100%; // Now you can apply height 100% 
    overflow: auto; 
} 

#semiProblematicDiv { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 20%; 
    height: 100%; // Now you can apply height 100% 
    overflow: auto; 
} 

행운

Answer 2

를 사용하려고 나머지 높이. 이것이 당신이 원하는 것이라면, 여기에 그것을 할 수있는 방법이 있습니다.

#resizable { 
    height: 80px; //this is changed by JQuery, right? 
} 

#fixHeightTop { 
    height: 20px; 
} 

#fixHeightBottom { 
    height: 20px; 
} 

#problematicDiv { 
    position: relative; 
    float: left; 
    width: 80%; 
    overflow: auto; 
    height: 100%; //this helps the div taking up the space 
} 

#semiProblematicDiv { 
    position: relative; 
    float: right; 
    width: 20%; 
    overflow: auto; 
    height: 100%; //this helps the div taking up the space 

}