使两列分别可滚动和视口剩余长度的高度

Question

我有一个 JS Fiddle 可以正常工作：http://jsfiddle.net/j7ay4qd8/5/

它由两个可单独滚动的栏组成，可以通过 javascript 轻松滚动到左栏的不同部分，而不会影响右栏或页面的其余部分。

然而，我让这个例子工作的唯一方法是使用两个导航的 px 对高度进行硬编码。

height:calc(100vh - 90px);

当然这可能不适用于不同的浏览器、设备和分辨率。

如果添加任何元素或更改这些导航的大小，它就会中断。

我真正想要的是让#form 自动调整大小以填充视口的剩余部分。

在我当前的示例中，如果我添加另一个元素（例如警报），#content 和#sidebar 将比视口长，并且随着整个页面在#content [=41 之后滚动，我会出现跳动滚动=] 已滚动。

带有警报和跳动滚动的示例：http://jsfiddle.net/c4k9u0mr/

我找到了这个 jsfiddle，它似乎解释了我想要使用 flexbox 的目的：http://jsfiddle.net/7yLFL/

然而，我尝试使用 flexbox 进行此操作也没有奏效。我可以让#content 和#guidelines 单独滚动的唯一方法是如果我给它们一个固定的高度并且我回到如何使这些 divs 100% 的容器 div.

这是我使用 flexbox 的失败尝试（在本例中它的高度固定为 100px）：http://jsfiddle.net/jh6d5ztq/

是否可以在不使用 px 定义固定高度的情况下让第一个和第二个 JS Fiddle 工作？

Answer 1

占据视口剩余高度的元素的所有父元素都需要具有 100% 高度。在 bootstrap 中，使用 h-100.
这些元素的最近父级必须是 flex 并且必须具有 flex-direction: column。在 bootstrap 中，使用 d-flex 和 flex-column。一些 classes 例如 row 已经是 flex 所以不要使用 d-flex.
对占剩余高度的元素使用flex-grow-1。同样，一些 classes 例如 col 有 flex-grow:1。

Bootstrap 弹性 classes

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
  <div class="py-3 bg-danger">

  </div>
  <div class="py-3 bg-danger">

  </div>
  <div class="flex-grow-1 bg-primary">

  </div>
</div>

Bootstrap网格

html,
body {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">

    </div>
    <div class="col-auto py-3 bg-success">

    </div>
    <div class="col bg-primary">

    </div>
  </div>
</div>

现在，div.col / div.flex-grow-1 占用视口的剩余高度。但是，如果它们的内容的高度大于 viewport，它们就不会这样做：它们的高度与其内容的高度相同。如果你想让它滚动，使用 overflow: auto。我想，bootstrap-4 没有 class 用于 overflow 属性的 none。所以你应该使用自定义 css。

https://codepen.io/anon/pen/JwWpgQ

附带说明一下，如果您想要，请使用这些方法，但将 col 与 col-auto

互换

如果您想让多个元素单独滚动，请对这些元素使用 overflow-auto 和 h-100。

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto;
}

.h-200vh {
  height: 200vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container h-100">
  <div class="row flex-column h-100">
    <div class="col-auto py-3 bg-danger">
    </div>
    <div class="col-auto py-3 bg-success">
    </div>
    <div class="col bg-dark d-flex">
      <div class="w-50 h-100 overflow-auto">
        <div class="bg-danger h-200vh"></div>
      </div>
      <div class="w-50 overflow-auto h-100">
        <div class="bg-primary h-200vh"></div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/QzpQRO

结论：

像往常一样使用 bootstrap 网格，但在 row 上使用 flex-column，对占据视口所有剩余高度的元素使用 col。如果你想让它滚动，使用自定义 css 应用 overflow:auto.

有问题可以留言，我会一一解答。我已经解决了你的问题，但我不会 post 因为我认为你最好先尝试。

更新

这是我的解决方案。 https://codepen.io/anon/pen/Jwrzwm

使两列分别可滚动和视口剩余长度的高度

Make two columns separately scrollable and the height of the remaining length of the viewport

css

flexbox

twitter-bootstrap

bootstrap-4

responsive

Bootstrap 弹性 classes

Bootstrap网格

结论：

更新