我想要一个 bootstrap "content" 容器有两个容器一个固定高度和一个百分比

Question

关于如何从 bootstrap 编写响应式 "content" 框，我遇到了一些问题。如 JsFiddle-Link 所示，我想让 Bootstrap content-inner 的内部响应。

在内容内框里我有

一个div，宽度固定（红色）
第二个容器（article 容器）是应该占据页面剩余 space 的容器（随着高度变大，白色背景应该变大）更大，顶部和底部的灰色 space 更小）。这个 Container 也有一个 overflow-y 但 overflow-x 是隐藏的，因为右边的滚动条在底部也会有一个滚动条。 （绿色）
第三个也是固定宽度（蓝色）

注意顶部和底部的space，应该有一个space。

关于realizing/solving这个问题我真的不知道那么多方法。
所以我搜索了如何实现的方法，找到了CSS Calc() function。这个 "function" 真的只是实验性的吗？我用这个功能测试了它，但我并没有真正得到成功的结果，所以我不知道更多的方法。

我在测试解决此问题时遇到的问题是，所有内容所在的内容内部框的白色背景消失了：/
我尝试用 Bootstrap class clearfix 修复它，但没有成功。

那么你有什么办法解决这个问题吗？

感谢您提供所有有用的结果和答案，感谢您提供的任何帮助。 :)

Answer 1

我不是 100% 我完全理解你的问题，但如果你希望文章上方和下方的元素具有固定高度并且可滚动文章响应不同的视口高度，这里是解决方案（请注意我找不到你为 'red' 和 'blue' 框设置确切高度的位置：

.height-450 {
  overflow: auto;
  height: calc(80vh - 100px - 200px);
}

'100px' 是给定的红色框的固定高度，'200px' 是给定的蓝色框的固定高度。 'vh' 代表 'viewport height'，其中“100vh”是整个高度。您可以使用 vh 和 px 以外的其他单位。

您可以控制上部和下部灰色 space，或者使用这些的故意高度，或者只是确保（通过给定的代码）内容内部永远不会占用视口的全部高度。请注意，后者会将所有内容保留在给定视口内，因此所有内容始终可见。

PS注意你的很多CSS可以用标准的Bootstrap类.

代替

I want a bootstrap "content" container to have two containers one fixed height and one with percentage