it-swarm.com.de

Bootstrap 3 - 100% Höhe der benutzerdefinierten div innerhalb der Spalte

Nehmen wir an, ich habe zwei Spalten in einer Reihe.

Eine enthält ein Bild mit class="img-responsive" für ein flüssiges Bild und die andere Spalte daneben enthält einen benutzerdefinierten Div-Block.

Meine Frage ist, wie man die Höhe des benutzerdefinierten Divs zu 100% erhält. Unten hat es für mich nicht funktioniert.

height: auto;
max-width: 100%;

Wenn ich einen festen Wert in der Höhe einstelle, kann er nicht mit der Spalte , Die das Bild enthält, abgespielt werden.

Ich kann die Säulenhöhen gleich erhalten, indem ich wie in den vorherigen Fragen vorgeschlagen Folgendes ausführt.

class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
.row {
    overflow: hidden; 
}

In meinem Fall ist es jedoch etwas anders, dass ich in der Spalte ein benutzerdefiniertes div verwenden muss, das die gleiche Höhe wie die Bildhöhe einstellt, nicht die übergeordneten divs (Spalten). 

Hier ist JS Fiddle

enter image description here

59
Seong Lee

Die ursprüngliche Frage befasst sich mit Bootstrap 3 und IE8 und 9 werden unterstützt. Daher ist Flexbox die beste Option, aber aufgrund meiner mangelnden Unterstützung nicht Teil meiner Antwort. Siehe http://caniuse.com/#feat=flexbox und schalten Sie das Feld IE um. Ziemlich schlecht, wie?

2 Wege:

1. Display-Tabelle: Sie können herumspielen, indem Sie die Zeile in eine Display-Tabelle und die Kolb-Anzeige umwandeln: Table-Cell. Es funktioniert zwar, da die Einschränkungen von Tabellen bestehen, darunter Push und Pull und Offsets funktionieren nicht. Außerdem weiß ich nicht, wo Sie das einsetzen - an welchem ​​Haltepunkt. Sie sollten das Bild in voller Breite machen und es in einen anderen Container einwickeln, um die Auffüllung dort zu platzieren. Außerdem müssen Sie das Design auf dem Handy herausfinden, dies gilt für 768px und mehr. Wenn ich dies verwende, deklariere ich die Größen neu, und manchmal klebe ich wichtige Elemente auf sie, weil Tabellen die Breite des Inhalts annehmen, so dass die erneute Deklaration der Breiten dies hilft. Sie müssen herumspielen. Ich benutze auch ein Skript, aber Sie müssen die weniger Dateien ändern, um es zu verwenden, sonst funktioniert es nicht.


DEMO: http://jsbin.com/EtUBujI/2

  .row.table-row > [class*="col-"].custom {
    background-color: lightgrey;
    text-align: center;
  }


@media (min-width: 768px) {

  img.img-fluid {width:100%;}

  .row.table-row {display:table;width:100%;margin:0 auto;}

  .row.table-row > [class*="col-"] {
    float:none;
    float:none;
    display:table-cell;
    vertical-align:top;
  }

  .row.table-row > .col-sm-11 {
    width: 91.66666666666666%;
  }
  .row.table-row > .col-sm-10 {
    width: 83.33333333333334%;
  }
  .row.table-row > .col-sm-9 {
    width: 75%;
  }
  .row.table-row > .col-sm-8 {
    width: 66.66666666666666%;
  }
  .row.table-row > .col-sm-7 {
    width: 58.333333333333336%;
  }
  .row.table-row > .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666666666667%;
  }
  .col-sm-4 {
    width: 33.33333333333333%;
  }
  .row.table-row > .col-sm-3 {
    width: 25%;
  }
  .row.table-row > .col-sm-2 {
    width: 16.666666666666664%;
  }
  .row.table-row > .col-sm-1 {
    width: 8.333333333333332%;
  }


}

HTML

<div class="container">
    <div class="row table-row">
        <div class="col-sm-4 custom">
                100% height to make equal to ->
        </div>
        <div class="col-sm-8 image-col">
            <img src="http://placehold.it/600x400/B7AF90/FFFFFF&text=image+1" class="img-fluid">
        </div>
    </div>
</div>

2. Absolute bg div

DEMO: http://jsbin.com/aVEsUmig/2/edit

DEMO mit Inhalt oben und unten: http://jsbin.com/aVEsUmig/3


.content {
        text-align: center;
        padding: 10px;
        background: #ccc;

}


@media (min-width:768px) { 
    .my-row {
        position: relative;
        height: 100%;
        border: 1px solid red;
        overflow: hidden;
    }
    .img-fluid {
        width: 100%
    }
    .row.my-row > [class*="col-"] {
        position: relative
    }
    .background {
        position: absolute;
        padding-top: 200%;
        left: 0;
        top: 0;
        width: 100%;
        background: #ccc;
    }
    .content {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
        padding: 10px;
    }

}

HTML

<div class="container">

    <div class="row my-row">

        <div class="col-sm-6">

        <div class="content">
          This is inside a relative positioned z-index: 1 div
          </div>

         <div class="background"><!--empty bg-div--></div>
        </div>

        <div class="col-sm-6 image-col">
            <img src="http://placehold.it/200x400/777777/FFFFFF&text=image+1" class="img-fluid">
        </div>

    </div>

</div>
25
Christina

Ich habe gerade nach einem ähnlichen Problem gesucht und habe folgendes gefunden:

.div{
  height : 100vh;
}

Mehr Info

vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
53
Yousef Altaf

Sie müssen die Höhe jedes übergeordneten Elements des Elements festlegen, für das die Höhe definiert werden soll.

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html>

Artikel.

JsFiddle Beispiel

4
dima_horror

Meine Lösung bestand darin, alle Eltern zu 100% zu machen und für jede Zeile einen bestimmten Prozentsatz festzulegen:

html, body,div[class^="container"] ,.column {
    height: 100%;
}

.row0 {height: 10%;}
.row1 {height: 40%;}
.row2 {height: 50%;}
0
pasx