Question

1 – How can I extend the azure square <div id="Blue"> to fill the square, brown in color?

2 – How can I match the #frame size height to my resolution window becose is some time bigger and then Sliding window to scroll down to see the bottom and some time it smaller?

Thx for any help

You can see here Demo jsFiddle

Relevant Code.

Html

<div id="frame">
    <div id="inside_window">
        <div id="Yellow"></div>
        <div id="Green"></div>
    <div id="Blue"><img src="http://www.centerwow.com/stackoverflow/shark.png"  height="50" width="50" />
    <img src="http://www.centerwow.com/stackoverflow/ship.png"  height="100" width="120" /></div>
    <div id="Red"></div>
    <div id="ver"></div>
    <div id="hor"></div>
    <div id="ver2"></div>
</div>

Style

#Blue{
    position: absolute;
    min-height:100%;
    min-width:75%;
    -webkit-border-radius: 0px;    
    margin: 0 150px;    
    background-color: #62A9FF;
    z-index:10;
    display:table;
    font-size:220%;
    cursor: url(http://www.centerwow.com/stackoverflow/magnet.png), auto;
    left:0px;
    top:0px;
}

Answer 1

So here goes the answer for your first problem: http://jsfiddle.net/surendraVsingh/hfuGx/49/

change min-height to height:100%;

#Blue
{
    position: absolute;
    height:100%;
    min-width:75%;
    -webkit-border-radius: 0px;    
    margin: 0 150px;
    background-color: #62A9FF;
    z-index:10;
    display:table;
    font-size:220%;
    cursor: url(http://www.centerwow.com/stackoverflow/magnet.png), auto;
    left:0px;
    top:0px; 
}

For your second question:
add below given css on the top of your css code:

html, body{height:100%;} 

Note: If the browser window height is too small it will show a scroll bar, because it will take the height as sum of green & red div.