将视口高度划分为两个具有可调整边框的 div

Question

我想将视口高度分成两个 div，并且边框可以调整。我认为我可以通过使用 flex（使元素填充其容器）并在顶部元素上设置 resize: vertical 和 overflow: auto（使其可调整大小）来完成此操作。由于 flex.

，我希望底部元素相应地调整大小

但我似乎不太对劲。这个片段展示了这个想法，但是当调整顶部元素的大小时，边框不会随着光标移动。（我在 Debian Stretch 上的 Firefox 52 和 Chromium 69 中进行了测试。）

我知道使用 JavaScript 的解决方案，但我正在寻找仅 CSS 的解决方案。那可能吗？我并不一定要使用 flex 或 resizable.

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex: 1 1 auto;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex: 1 1 auto;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

您需要禁用第一个元素的收缩。我认为在改变元素的大小时你改变了一个新的高度然后 flexbox 应用他的收缩效果来计算另一个高度因为两个元素的大小都大于容器并且 the negative free space 需要平均分割.这就是为什么光标移动到底部（元素收缩）

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex-shrink:0;
  height:50%;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

如果您尝试另一个我们没有负自由度的示例 space，您将不会遇到问题，并且在没有 flex-shrink:0 的情况下它也可以工作，因为 flexbox 不会计算新的高度。

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
</div>

并且在这种情况下（当内容较小并且我们有 positive free space 时）我们还需要禁用 flex-grow（即避免设置 flex-grow），因为我们将有一个与 flex-shrink 类似的效果。 flexbox 将尝试计算一个新的高度来使元素增长，以便将空闲的 space 平均分割。在这种情况下，光标移动到顶部（元素增长）

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  flex-grow:1; /*not good*/
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}

<div id="container">
  <div id="A">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </div>
  <div id="B">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat </div>
</div>

将视口高度划分为两个具有可调整边框的 div

Dividing the viewport height over two divs with an adjustable border

html

css

resize

flexbox