更新

Question

我已经按照我的意愿进行了JS Fiddle的工作：http://jsfiddle.net/j7ay4qd8/5/

它包括两列，分别可滚动，并且左列的不同部分可以通过javascript轻松滚动到，而不会影响到右列或页面的其余部分。

不过，在此示例中，我完成此工作的唯一方法是使用两个导航的px来对高度进行硬编码。

height:calc(100vh - 90px);

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

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

我真正想要的是#form自动调整大小以填充视口中剩下的任何东西。

在当前示例中，如果我添加了另一个元素（例如警报），则#content和#sidebar将比视口更长，并且在#content div滚动后整个页面滚动时，我将获得跳跃式滚动。 / p>

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

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

但是，我尝试通过flexbox进行的尝试也没有成功。我可以使#content和#guidelines分别滚动的唯一方法是，将它们赋予固定的高度，然后我回到如何使这些div成为容器div的100％的地方。

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

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

Answer 1

占据视口剩余高度的所有元素父级必须具有100%高度。在引导程序中，使用h-100。
这些元素的最接近的父级必须为flex，并且必须具有flex-direction: column。在引导程序中，使用d-flex和flex-column。某些classes，例如row已经是flex，因此请不要使用d-flex。
将flex-grow-1用作剩余高度的元素。同样，某些classes，例如col具有flex-grow:1。

Bootstrap flex类

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>

引导网格

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没有一个overflow属性的类。因此，您应该使用自定义CSS。

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

请注意，如果您想拥有footer at the bottom，请使用以下方法，但将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

结论：

像平常一样使用引导网格，但是在flex-column和row上使用col，将元素占据所有视口的其余高度。如果要使其可滚动，请使用自定义CSS来应用overflow:auto。

如果有任何问题请发表评论，我会回答。我已经解决了您的问题，但我不会发布它，因为我认为最好先尝试一下。

更新

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

使两列分别滚动，并使视口剩余长度的高度

1 个答案:

Bootstrap flex类

引导网格

结论：

更新