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>

如果您尝试另一个示例，我们没有负的可用空间，那么您就不会有问题，并且如果没有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会尝试计算新的高度以使元素增长，以平均分配可用空间。在这种情况下，光标移到顶部（元素不断增长）

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

1 个答案: