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

Question

我有一个div我需要动态调整大小，但是当我放大网页时，我似乎无法使它工作。

<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/
我想将下层div（绿色）完全保留在浏览器窗口内，认为绿色div内的内容可以滚动

我可以动态调整大小，所以当我缩放时，div会自行调整大小吗？

Answer 1

演示 - http://jsfiddle.net/victor_007/a6jscb6r/3/

将你的风格移到了外面

使用height:calc();

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;