Bootstrap 4，如何使col的高度为100％？答案

【问题标题】：Bootstrap 4, how to make a col have a height of 100%?Bootstrap 4，如何使col的高度为100％？
【发布时间】：2017-12-12 10:49:50
【问题描述】：

如何使用 bootstrap 4 使列占据浏览器 100% 的高度？

请参阅以下内容：https://codepen.io/johnpickly/pen/dRqxjV

注意黄色的 div，我需要这个 div/列占据 100% 的高度...有没有办法做到这一点，而不必让所有父 div 的高度为 100%？

谢谢

html:

<div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

【问题讨论】：

我假设你已经在某处指定了这个：<div class="col-sm-2 hidden-lg-up hidden-xs-down"></div>?

标签： twitter-bootstrap css grid-layout bootstrap-4 twitter-bootstrap-4

【解决方案1】：

为height:100%; 使用 Bootstrap 4 h-100 类

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 hidden-md-down" id="yellow">
      XXXX
    </div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8">
      Form Goes Here
    </div>
  </div>
</div>

https://www.codeply.com/go/zxd6oN1yWp

您还需要确保所有父母的身高也是 100%（或具有定义的高度）...

html,body {
  height: 100%;
}

注意：100% 高度与“剩余”高度不同。

【讨论】：

如果 col 中的内容大于 100% 高度 - 就像长表单一样，这不起作用。
是的，在这种情况下你会使用 min-height 代替：codeply.com/go/MjGkqFWmA1
改为编辑css文件，添加<html class="h-100">和<body class="h-100">
@Zim，如果我有超过 3 个父母，那么我必须为所有父母添加 h-100 类？

【解决方案2】：

使用引导类 vh-100

对于经验：

   <div class="vh-100">
       <p> Full Height </p>
   </div>

【讨论】：

【解决方案3】：

我已经尝试过 Stack Overflow 上建议的六种解决方案，唯一对我有用的是：

<div class="row" style="display: flex; flex-wrap: wrap">
    <div class="col-md-6">
        Column A
    </div>
    <div class="col-md-6">
        Column B
    </div>
</div>

我从https://codepen.io/ondrejsvestka/pen/gWPpPo得到了解决方案

请注意，它似乎会影响列边距。我必须对它们进行调整。

【讨论】：

不幸的是，我刚刚发现这会导致 Safari 中的列垂直堆叠。把这个留在这里，以防有人知道如何解决这个问题。
这不是由flex-wrap: wrap 引起的吗？基本上意味着如果屏幕没有空间将它们放在一起，它将换行到下一行，使其位于下方而不是旁边。

【解决方案4】：

我是这样解决的：

    <section className="container-fluid">
            <div className="row justify-content-center">

                <article className="d-flex flex-column justify-content-center align-items-center vh-100">
                        <!-- content -->
                </article>

            </div>
    </section>

【讨论】：

【解决方案5】：

为父div设置display: table，为子div设置display: table-cell

HTML：

<div class="container-fluid">
  <div class="row justify-content-center display-as-table">

    <div class="col-4 hidden-md-down" id="yellow">
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />
      XXXX<br />vv
      XXXX<br />
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8" id="red">
      Form Goes Here
    </div>
  </div>
</div>

CSS：

#yellow {
  height: 100%;
  background: yellow;
  width: 50%;
}
#red {background: red}

.container-fluid {bacgkround: #ccc}

/* this is the part make equal height */
.display-as-table {display: table; width: 100%;}
.display-as-table > div {display: table-cell; float: none;}

【讨论】：

【解决方案6】：

我遇到了这个问题，因为我的 cols 超过了行网格长度 (> 12)

使用 100% Bootstrap 4 的解决方案：

由于 Bootstrap 中的行已经是display: flex

您只需将 flex-fill 添加到 Col，并将 h-100 添加到容器和任何子项。

笔在这里：https://codepen.io/joshkopecek/pen/Exjdgjo

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">

    <div class="col-4 hidden-md-down flex-fill" id="yellow">
      XXXX
    </div>

    <div id="blue" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
      Form Goes Here
    </div>

    <div id="green" class="col-10 col-sm-10 col-md-10 col-lg-8 col-xl-8 h-100">
      Another form
    </div>
  </div>
</div>

【讨论】：

flex-fill 类效果很好，谢谢！