html - 根据窗口大小和缩放调整 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();

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