html - 垂直调整 3 个 div 中的 1 个以适应窗口？

Question

我正在尝试制作一个应该是简单的响应式页面，它由几个 div 组成，如下所示:

<div id="container"> maximum 1200 width and 1000 height
    <div id="vertically-static-top">20 pixes high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

整体最大宽度和最大高度分别为1200和1000

垂直静态 div 只能在浏览器窗口调整大小时水平调整大小，但垂直方向它们的高度必须始终固定

vertically-resizeable div 需要根据窗口尺寸调整其宽度和高度。

我一直想不出如何让中间的 div 垂直调整大小并将所有内容都保留在浏览器窗口内!

非常感谢!

Answer 1

我认为您必须使用位置 absolute。检查以下代码段。

html,
body {
  font: 13px Verdana;
  margin: 0;
  height: 100%;
}

#container {
  max-height: 1000px;
  max-width: 1200px;
  background: red;
  color: #fff;
  height: 100%;
  position: relative;
}

#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
  position: absolute;
  left: 0;
  right: 0;
}

#vertically-static-top {
  height: 20px;
  top: 0;
  background: black;
}

#vertically-static-bottom {
  height: 50px;
  bottom: 0;
  background: black;
}

#vertically-resizeable-middle {
  top: 20px;
  bottom: 50px;
}

<div id="container">
  <div id="vertically-static-top">20 pixes high</div>
  <div id="vertically-resizeable-middle">adjustable height</div>
  <div id="vertically-static-bottom">50 pixels high</div>
</div>

我希望这会奏效。