Bootstrap 3 - 100% высота пользовательского div внутри столбца

Скажем, у меня есть два столбца в строке.

Один содержит изображение с использованием class="img-responsive" для жидкостного изображения, а другой столбец рядом с ним имеет пользовательский блок div.

Мой вопрос заключается в том, как получить эту настраиваемую высоту div на 100%. Ниже не работало для меня.

height: auto;
max-width: 100%;

Если я устанавливаю фиксированное значение по высоте, он не будет хорошо воспроизводиться с помощью столбец, содержащий изображение, когда изображение изменяет высоту при изменении размера окна просмотра.

Я могу получить высоту столбцов, выполнив что-то вроде следующего, как было предложено предыдущими вопросами.

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

Но мой случай немного отличается от того, что мне нужно использовать пользовательский div внутри столбца, который устанавливает равную высоту с высотой изображения, а не родительскими div (столбцами).

Вот JS Fiddle

Ответ 1

Оригинальный вопрос касается Bootstrap 3 и поддерживает IE8 и 9, поэтому Flexbox будет лучшим вариантом, но он не является частью моего ответа из-за отсутствия поддержки, см. http://caniuse.com/#feat=flexbox и переключите окно IE. Довольно плохо, а?

2 способа:

1. Дисплей стол: Вы можете гасить вокруг, превращая строку в экран: table и col-display display: table-cell. Он работает при наличии ограничений в таблицах, среди этих ограничений действуют push и pull и смещения. Кроме того, я не знаю, где вы используете это - на какой точке останова. Вы должны сделать изображение полной шириной и обернуть его внутри другого контейнера, чтобы поместить туда прокладку. Кроме того, вам нужно выяснить дизайн на мобильном устройстве, это для 768 пикселей и выше. Когда я использую это, я переопределяю размеры и иногда привязываю к ним импортеров, потому что таблицы берут на себя ширину содержимого внутри них, поэтому с объявлением ширины снова это помогает. Вам нужно будет поиграть. Я также использую script, но вам нужно изменить меньшее количество файлов, чтобы использовать его, или оно не будет работать оперативно.

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. Абсолютный bg div

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

DEMO с содержанием выше и ниже: 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>

Ответ 2

Я просто искал знакомый вопрос, и я нашел это:

.div{
  height : 100vh;
}

подробнее

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

Ответ 3

Вам нужно установить высоту каждого родительского элемента той, которую вы хотите определить высоту.

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

Статья.

Пример JsFiddle

Ответ 4

Мое решение состояло в том, чтобы сделать всех родителей 100% и установить определенный процент для каждой строки:

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

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