我想要一个引导“内容”容器有两个容器，一个是固定高度，一个是百分比答案

【问题标题】：I want a bootstrap "content" container to have two containers one fixed height and one with percentage我想要一个引导“内容”容器有两个容器，一个是固定高度，一个是百分比
【发布时间】：2017-12-23 23:30:00
【问题描述】：

我对如何从引导程序编写响应式“内容”框有一些问题。正如JsFiddle-Link 所示，我想让 Bootstrap 的内部 content-inner 响应。

在我的内容内盒中

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

注意顶部和底部的空格，应该有空格。

我真的不知道有多少方法可以实现/解决这个问题。
所以我搜索了如何实现的方法，我找到了CSS Calc() function。这个“功能”真的只是实验性的吗？我用这个函数测试了它，但我并没有真正得到成功的结果，所以我不知道更多的方法。

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

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

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

【问题讨论】：

您能否提供一个代码示例来说明您正在处理的工作？将高度设置为红色 10%，将绿色高度设置为 90%，将蓝色高度设置为 10%。我不明白你在这里问什么。
就像在 JSFiddle 上一样，但我已将高度设置为 450 像素，但如果浏览器窗口变高，它应该会变高。红色和蓝色容器是固定的，应该保持不变。

标签： html css twitter-bootstrap containers css-calc

【解决方案1】：

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

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

“100px”是给定的红色框的固定高度，“200px”是给定的蓝色框的固定高度。 “vh”代表“视口高度”，其中“100vh”是整个高度。并且你可以使用除 vh 和 px 之外的其他单位。

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

PS 请注意，您的许多 CSS 都可以被标准 Bootstrap 类替换。

CSS calc() https://www.w3schools.com/cssref/func_calc.asp 得到广泛支持 https://caniuse.com/#search=calc

【讨论】：