Я не могу установить высоту для моего столбца в сетке Bootstrap

Question

Я склоняюсь к Angular 4, и я создаю приложение с помощью Bootstrap, я использую систему сетки, но я не эль, чтобы установить любую высоту для столбцов сетки. Я перепробовал все решения, доступные в Интернете, установив переполнение на скрытый в контейнере и затем установив очистку: оба в столбце. Не в состоянии заставить это работать

<div class="container" >
<div class="row">
<div class="col-lg-12" style="background-color:aqua">
 Column 1
</div>
</div>
<div class="row">
<div class ="col-lg-12" style="background-color:blueviolet">
 Column 2
</div>
</div>
</div>



.container{
height: 90%;
overflow:hidden;
}
.row{
height:25%;
clear: both;
}
.col-lg-12{
height:100%;
clear:both;
}

Ссылка на ссылку JsFiddle

Пожалуйста, дайте мне знать!!!

Answer 1

Работает ли определение высоты родительского контейнера? (Использование vh единиц для определения его высоты, как показано ниже, должно сделать его отзывчивым.)

Из этого фрагмента трудно понять, но в своем полном коде вы определяете высоту элемента, который содержит div.container? Если нет, то 90%, которые вы установили как высоту.container, не будут работать, потому что не будет определенного контекста для того, что именно вы используете для создания своего роста: 90%.

Если вы добавите высоту к своему родительскому элементу - и вы можете увидеть это в игре в этом примере на Codepen: https://codepen.io/msummers40/pen/EobqOo - вещи приобретают большую четкость / большую высоту. На этой странице Codepen я только что добавил новый родительский элемент и соответствующий селектор CSS:

.container-of-container {
  height: 100vh;
  width: 100%;
}

Когда высота div.container-of-container установлена ​​на 100vh, высота.container становится равной 90%. В свою очередь каждый из двух рядов составляет 25% от высоты.контейнера.

В любом случае, если вы установите высоту (используя px, em, vh и т. Д.) Родительского элемента.container, вы должны увидеть, как изменение размера происходит больше, чем вы ожидаете.

Answer 2

Проблема в том, что вы пытаетесь установить высоту в процентах.

Высота элемента блока (div является элементом блока) зависит от высоты содержимого.

Если вы укажете процент, это всегда будет учитывать высоту содержимого, несмотря ни на что.

Измените высоту на пиксели, и вы будете контролировать высоту элемента.

Смотрите этот ответ для получения дополнительной информации

.container {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: auto;
    overflow:hidden;
}

.row {
    overflow:hidden;
    width:100%;
    height:25%;
}

.col-lg-12 {
    float: left;
  width: 10%;
  height: 350px; -> height in pixels, not in percent
  clear: both;
}