Bootstrap 4 用行/容器引导填充窗口剩余高度_Bootstrap 4_Containers_Height

Bootstrap 4 用行/容器引导填充窗口剩余高度

bootstrap-4

Bootstrap 4 用行/容器引导填充窗口剩余高度,bootstrap-4,containers,height,Bootstrap 4,Containers,Height,在过去的三天里，我一直在寻找解决这个问题的方法，但没有任何结果因此，我有一个HTML页面，必须适合窗口，我使用的是Bootstrap4.1.1。这个页面非常简单： 1个标题行，自动或固定高度 1内容行，必须填充剩余的窗口可用空间整个代码大约有250行，因此我将尝试编写一个示例来说明我需要的内容： <body> <div id="header" class="container-fluid"> <!--Bootstrap rows and stuffs

在过去的三天里，我一直在寻找解决这个问题的方法，但没有任何结果

因此，我有一个HTML页面，必须适合窗口，我使用的是Bootstrap4.1.1。这个页面非常简单：

1个标题行，自动或固定高度
1内容行，必须填充剩余的窗口可用空间

整个代码大约有250行，因此我将尝试编写一个示例来说明我需要的内容：

<body>
<div id="header" class="container-fluid">
   <!--Bootstrap rows and stuffs that actually work well
</div>

<div class="container-fluid">
    <div class="row" id="main-row">    
        <!--FIRST COLUMN: SUMMARY-->
        <div id="menu" class="col-2 box">
            <!--Here i have a navbar menu-->
        </div>

        <!--SECOND COLUMN: CONTENT-->
        <div id="content" class="col-8 box">
           <!--Here i have contents: one video tag and one carousel-->
        </div>

        <!--THIRD COLUMN: DESCRITPION-->
        <div id="description" class="col-2 box">
           <!--Here i some text-->            
        </div>
    </div>
</div>

我只需要整个第二个容器流体（或其中的一行）来填充窗口的其余部分，使每个列保持在该高度

以下是我尝试过的：

正文和html高度设置为100%

尝试用一个大容器同时容纳标题和内容，而不是两个

将第二个容器的高度设置为100%/inherit/almostriedeverything:and 这很奇怪，它实际上设置为窗口高度的100%，但忽略不计页眉高度（因此我仍然有一个垂直滚动条）

很多其他的东西，比如表格布局，flex（我想避免它）因为IE兼容性）和几乎所有在web上找到的解决方案

有趣的事实：引导列完全忽略了主体高度，它们超过了它的底部限制。

使用卡片组将卡片渲染为具有相同宽度和高度列的单个附加元素。卡片组使用显示：flex；以实现其均匀上浆。

您还可以像这样创建新类 .equalhight{display:flex；}并可将其应用于最顶端的div

这是我的第一篇文章。谢谢。

如果这对某人有帮助，我已经解决了这个问题

Bootstrap几乎不关心高度，而是保持高度不变（例如，我的意思是，如果窗口高度降低，标题不会调整其高度）。因此，将收割台高度声明为165px（在我的情况下，它非常适合）允许我使用

height: calc(100vh - 165px);

这不是最好的解决方案，但它很有效

不清楚您试图解决什么问题。你是说喜欢还是喜欢？两者都试过了！没有变化，或者身体变大，容纳容器。记不清第一个或第二个结果发生在什么情况下你能更具体一点吗？我已经做了一些测试，但问题仍然存在（card类停留在主体内部，其余的继续从底部超过）