根据窗口大小和缩放来调整div的大小

Question

I have a div i need to resize dynamically, but i cant seem to make it work when i zoom in a webpage.

<div style="background-color:red">
    Result screen small
</div>
<div style="background-color:green;height:370px;overflow:scroll">    //ignore static height
    stretch even when zoomed
</div>

http://jsfiddle.net/a6jscb6r/1/
http://jsfiddle.net/a6jscb6r/2/
I want to keep the lower div (green one) completely inside the browser window, thought the content inside the green div can be scrollable

Can i resize it dynamically so when i zoom, the div resizes itself?

Answer 1

demo - http://jsfiddle.net/victor_007/a6jscb6r/3/

moved your styles outside

use height:calc();

 * { margin: 0; padding: 0; } html, body { height: 100%; } .head { background-color: red; height: 20px; } .cont { background-color: green; height: calc(100% - 20px); overflow: scroll; } 

 <div class="head">Result screen small</div> <div class="cont">stretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomedstretch even when zoomed</div>