html - 如何使网页上的流体容器垂直(仅在容器上滚动)？

Question

我有一个我正在尝试制作的网络应用程序，它在网格 (col-md-6) 内放置一个流体容器，并将其内容水平和垂直放置在页面上。

想法是让它在浏览器中的页面不滚动，但网格中的内容有'overflow: auto;'设置，因此如果需要，网格内容可以滚动。在图片中，表格从屏幕上移开，整个页面都可以滚动，而不仅仅是内容。

所以网格应该是固定的，并且在所有四个边上都有一个导航栏，几乎像一个框架，中心内容应该与它齐平。

我试过将中心面板设置为 position:fixed;但这使它脱离了 html 的流程，因此它没有响应。所以我真的需要所有的内容都与页脚齐平，然后根据屏幕尺寸在水平和垂直方向做出相应的响应。

任何帮助或代码都会很棒。

Answer 1

您将不得不编写一些自定义 CSS 来完成这项工作。

首先你需要设置body和html为height: 100%和min-height: 100% - 您还需要对您的 fluid-container 和 col-md-6 执行此操作。这将使它们垂直填充空间。之后，在网格内容上设置 overflow-y: scroll。

请注意，您必须在媒体查询中编写额外的 CSS 来处理布局响应小于 md 尺寸时发生的情况。 Bootstrap 文档可以提供帮助。

要获得更详细的帮助，我真的需要查看您的代码。