如何使流体容器在网页上垂直放置（仅在容器上滚动）？

Question

我有一个网络应用程序，我试图将一个流体容器放在网格内（col-md-6），并将其内容水平和垂直地放在页面上。

这样做的目的是使浏览器中的页面不滚动，但网格中的内容有'overflow：auto;'设置，所以如果需要，网格内容可以滚动。在图片中，表格在屏幕上运行，整个页面可以滚动，而不仅仅是内容。

因此网格应该是固定的，并且在所有四个边上都有一个导航栏，几乎像一个框架，中心内容应该被刷新。

我尝试将中心面板设置为位置：固定;但这使得它脱离了html的流程，所以它没有响应。所以我真的需要所有内容与页脚齐平，然后根据屏幕大小进行相应的水平和垂直响应。

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

Answer 1

您将不得不编写一些自定义CSS来实现此功能。

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

请注意，您必须在媒体查询中编写其他CSS，以便在布局响应低于md大小时处理布局会发生什么。 Bootstrap文档可以帮助解决这个问题。

如需更详细的帮助，我确实需要查看您的代码。