web-dev-qa-db-ja.com

Bootstrap 4、colの高さを100％にする方法は？

カラムをブラウザの高さ100％にするにはどうすればよいですか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>
twitter-bootstrapcss3grid-layoutbootstrap-4twitter-bootstrap-4
21
AnnaSm

h-100にはBootstrap 4 height: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％の高さは、「残りの」高さと同じではありません。

関連：ブートストラップ4：残りの高さを引き伸ばす方法？

46
Zim

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 から解決策を得ました

列の余白に影響するようです。それらに調整を適用する必要がありました。

5
Derrick Miller

親divにdisplay: tableを設定し、children divsに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;}
1
Alan Yong

私はこれを次のように解決しました：

    <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>
0
Lawrence Eagles

それは良い解決策ではありませんが、あなたの問題を解決するかもしれませんが。 #yellow要素で絶対位置を使用する必要があります！

#yellow {height: 100%; background: yellow; position: absolute; top: 0px; left: 0px;}
.container-fluid {position: static !important;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row justify-content-center">

    <div class="col-4" 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>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
0
Rohit Sharma