web-dev-qa-db-fra.com

Bootstrap 3 - 100% hauteur du div personnalisé dans la colonne

Disons que j'ai deux colonnes d'affilée.

L'une contient une image utilisant class="img-responsive" pour l'image fluide et l'autre colonne à côté d'un bloc div personnalisé.

Ma question est de savoir comment obtenir 100% de la taille de cette div personnalisée. Ci-dessous n'a pas fonctionné pour moi.

height: auto;
max-width: 100%;

Si je définis une valeur fixe en hauteur, la colonne Contenant l'image ne fonctionnera pas bien, car l'image redimensionnera en hauteur lorsque la taille de la fenêtre d'affichage changera.

Je peux obtenir des hauteurs de colonnes égales en procédant de la manière suivante, comme suggéré par les questions précédentes.

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

Mais mon cas est légèrement différent du fait que je dois utiliser un div personnalisé à l'intérieur de la colonne qui Définit une hauteur égale à la hauteur de l'image, pas les divs parents (colonnes). 

Voici JS Fiddle

enter image description here

csstwitter-bootstrap
59
Seong Lee

La question initiale concernait Bootstrap 3 et prenant en charge IE8 et 9, donc Flexbox serait la meilleure option, mais cela ne fait pas partie de ma réponse en raison du manque de soutien. Voir http://caniuse.com/#feat=flexbox et basculez la case IE. Pas mal, hein?

2 façons:

1. Table d'affichage: Vous pouvez modifier la ligne en un affichage: table et la colonne en affichage: table-cellule. Cela fonctionne, mais les limites des tables sont présentes, parmi lesquelles les fonctions Push et Pull et les décalages ne fonctionnent pas. De plus, je ne sais pas où vous utilisez ceci - à quel point de rupture. Vous devez agrandir l’image et l’envelopper dans un autre conteneur pour y placer le rembourrage. En outre, vous devez comprendre le design sur mobile, ceci pour 768px et plus. Quand j’utilise cela, je redéclare les tailles et j’y colle parfois des points importants, car les tableaux prennent la largeur du contenu qu’ils contiennent, il est donc utile d’avoir les largeurs déclarées à nouveau. Vous aurez besoin de jouer. J'utilise aussi un script mais vous devez changer le moins de fichiers pour l'utiliser, sinon cela ne fonctionnera pas correctement.

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 avec contenu ci-dessus et ci-dessous: 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

Je cherchais simplement un problème similaire et j'ai trouvé ceci:

.div{
  height : 100vh;
}

Plus d'informations 

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

Vous devez définir la hauteur de chaque élément parent de celui pour lequel vous souhaitez définir la hauteur.

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

Article.

Exemple JsFiddle

4
dima_horror

Ma solution consistait à rendre tous les parents à 100% et à définir un pourcentage spécifique pour chaque ligne:

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

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