Auto height to auto scroll html div - Div to get the remaining height

Question

I have a very simple but confusing problem, what is my problem: I have a div. the first div, which is fixed in the upper right corner with a height of 100%, and this div has 2 more divs inside div2, and div3 has scrolling.

one top div2 changes from 100px to 200px, after which it should scroll, and the div with id div3 should occupy the remaining height and should scroll if the data is enlarged.

I can reach up to div2, but div3 does not accept the remaining height

my code

    <div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
<div style="width:100%;min-height:100px;max-height:200px;background:blue;overflow:auto;float:left;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>
<div style="width:100%;height:300px;background:yellow;float:left;overflow:auto;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>

I need something like a browser. if you can offer me something, that would be very helpful ..

this is a demo http://www.reurl.in/f84acc961

https://jsfiddle.net/fy727tLL/

Answer 1

: Fiddle

<div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
  <div style="width:100%;height:20%;background:blue;overflow:auto;float:left;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
  <div style="width:100%;height:80%;background:yellow;float:left;overflow:auto;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
</div>

Hide result

Answer 2

, , - div2 "" , div2 , . JSfiddle, - , , div:

http://jsfiddle.net/e13wzxgb/1/

#div2 {
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#div3 {
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
height:auto;
margin-left:auto;
    margin-right: auto;
bottom: 0px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

, !