如何使 Bootstrap 4 列的高度为 100%？

Question

如何让一个列占据浏览器的 100% 高度 w bootstrap 4？

查看以下内容：https://codepen.io/johnpickly/pen/dRqxjV

注意黄色 div，我需要这个 div/column 来占据 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>

Answer 1

为父div设置display: table，为子divs[=22设置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;}

Answer 2

对height:100%;

使用Bootstrap4h-100class

<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

您还需要确保任何 parent(s) 也是 100% 高度（或具有定义的高度）...

html,body {
  height: 100%;
}

注意：100% 高度与 "remaining" 高度不同。

相关：

Answer 3

我已经尝试了超过 6 个 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

那里得到了解决方案

请注意，它似乎会影响列边距。我不得不对这些进行调整。

Answer 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>

Answer 5

我遇到这个问题是因为我的 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>

Answer 6

使用bootstrapclassvh-100

对于指数：

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

如何使 Bootstrap 4 列的高度为 100%？

How can I make Bootstrap 4 columns have a height of 100%?

css

grid-layout

twitter-bootstrap

bootstrap-4