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

pgky5nke  于 2023-04-23  发布在  Bootstrap
关注(0)|答案(7)|浏览(222)

我怎样才能使一列占据浏览器w bootstrap 4的100%高度?
请参见以下内容:https://codepen.io/johnpickly/pen/dRqxjV
注意黄色的div,我需要这个div/column占据100%的高度……有没有办法让所有的父div都有100%的高度?
谢谢你
联系我们

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

t9aqgxwy1#

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
您还需要确保任何父(S)也是100%的高度(或有一个定义的高度)...

html,body {
  height: 100%;
}

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

**相关:**Bootstrap 4:如何使排拉伸剩余高度?

6tr1vspr

6tr1vspr2#

使用引导类vh-100
对于exp:

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

b1zrtrql3#

我已经尝试了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得到了解决方案
请注意,它似乎影响了列边距。我不得不对那些应用调整。

9w11ddsr

9w11ddsr4#

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

wgx48brx5#

我是这样解决的:

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

uqjltbpv6#

父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;}
aoyhnmkz

aoyhnmkz7#

参见文档booot Bootstrap 大小调整#相对于父级

<div class="h-100 d-inline-block">
     <p> Full Height </p>
</div>

相关问题