Question

我在如何从bootstrap编写响应式“内容”框时遇到了一些问题。与显示的JsFiddle-Link一样，我想让Bootstrap内部content-inner响应。 Here a note]

在内容框中，我有

一个具有固定宽度的div （红色）
第二个容器（article容器）是应该占用页面剩余空间的容器（因此，当高度变大时，白色背景应该变大，顶部和底部灰色空间小）。这个容器也有溢出-y但溢出-x是隐藏的，因为右边的滚动条底部还有一个滚动条。的 （绿色）
第三个也有固定的宽度 （蓝色）

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

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

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

那么你对如何解决这个问题有任何解决方案吗？

感谢您提供所有有用的结果和答案，并感谢您的帮助。：）

Answer 1

我不是100％我完全理解你的问题，但是如果你想让文章上方和下方的元素固定高度，可滚动的文章在这里响应不同的视口高度是解决方案（请注意我无法找到“红色”和“蓝色”框中确切高度的位置：

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

＆＃39; 100px＆＃39;将是红色框的给定固定高度和＆＃39; 200px＆＃39;是给定的蓝色框的固定高度。＆＃39; VH＆＃39;代表视口高度＆＃39;在哪里＆＃39; 100vh＆＃39;是整个高度。你可以使用除vh和px之外的其他单位。

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

PS请注意，很多CSS都可以用标准的Bootstrap类替换。