Bootstrap-4, how to make a col haben eine Höhe von 100%?

wie kann ich eine Spalte nehmen, bis 100% der Höhe des browser-w-bootstrap 4?

Finden Sie unter: https://codepen.io/johnpickly/pen/dRqxjV

Hinweis: das gelbe div, ich brauche das div/Spalte zu nehmen, bis eine Höhe von 100% Ist,... dort Weg, um dies geschehen zu lassen, ohne alle übergeordneten div ' s haben eine Höhe von 100%?

Danke

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>

Ich nehme an, Sie haben angegeben, dies irgendwo: <div class="col-sm-2 hidden-lg-up hidden-xs-down"></div>?

InformationsquelleAutor AnnaSm | 2017-07-08

42

Verwendung der Bootstrap-4 h-100 Klasse 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

Müssen Sie auch sicherstellen, dass kein Elternteil(en) sind auch 100% Höhe (oder eine definierte Höhe)...
```
html,body {
  height: 100%;
}
```
Hinweis: 100% Höhe ist nicht das gleiche wie "restlichen" Höhe.

Verwandte: Bootstrap-4: Wie man die Zeile stretch Verbleibende Höhe?
- Das funktioniert nicht, wenn der Inhalt in der col ist größer als 100% Höhe - wie lange Formen.
- Ja, in diesem Fall würden Sie verwenden, min-height statt: codeply.com/go/MjGkqFWmA1
InformationsquelleAutor Zim
4

Habe ich versucht, über ein halbes Dutzend Lösungen vorgeschlagen, auf Stack Overflow und das einzige, was für mich gearbeitet hat, war dies:
```
<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>
```
Ich habe die Lösung von https://codepen.io/ondrejsvestka/pen/gWPpPo

Beachten Sie, dass es scheint auf die Spalte Margen. Ich musste Anpassungen vornehmen, um die.
- Leider, ich habe gerade entdeckt, dass dies bewirkt, dass die Spalten-Stapel vertikal in Safari. Wobei dieser hier, falls jemand weiß, wie um das zu beheben.
- wäre das nicht nur verursacht werden durch die flex-wrap: wrap ? Im Grunde bedeutet, wenn der Bildschirm nicht über die Immobilien, um Sie zusammen, es werde in die nächste Zeile umbrochen, so dass es unten statt neben.
InformationsquelleAutor Derrick Miller

Set display: table für übergeordneten div und display: table-cell für Kinder divs

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

InformationsquelleAutor Alan Yong

Es ist zwar keine gute Lösung aber kann Ihr problem lösen. Sie müssen verwenden position absolute in #yellow element!

CSS:

#yellow {height: 100%; background: yellow; position: absolute; top: 0px; left: 0px;}
.container-fluid {position: static !important;}

HTML:

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

InformationsquelleAutor Rohit Sharma

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.