Question

过去3天内，我一直在寻找解决此问题的方法，但完全没有结果。

因此，我有一个必须适合该窗口的HTML页面，并且正在使用引导程序4.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％/继承/ almostTriedEverything：和这很奇怪，它实际上设置为窗口高度的100％，但是忽略了标头高度（所以我仍然有一个垂直滚动条）
还有很多其他东西，例如表格式布局，flex（我想避免它由于具有IE兼容性）以及网上几乎所有的解决方案

有趣的事实：引导程序列完全忽略了车身高度，并且超过了其底部极限。

Answer 1

使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。卡组使用显示：flex;实现他们的统一大小。 https://getbootstrap.com/docs/4.0/components/card/

您也可以像这样创建新类 .equalhight {display：flex;}并将其应用于最顶部的div。

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

Answer 2

万一这可以帮助某人，我已经通过一种解决方法解决了这个问题。

Bootstrap几乎不关心高度并保持其固定（例如，我的意思是说，如果减小窗口高度，则标头不会调整其高度）。因此，将标头高度声明为165px（在我的情况下，它非常适合）允许我使用

来计算第二行的高度

height: calc(100vh - 165px);

这不是有史以来最好的解决方案，但是它可以解决

用行/容器引导程序填充窗口剩余高度

2 个答案: