Bootstrap встроенное видео и Div одинаковой высоты

Я использую начальную загрузку, и я хочу иметь встроенное видео и div рядом с одинаковой высотой. Опробовал различные решения, размещенные здесь на SO, но не смог заставить ни одно из них работать.

HTML & CSS выглядит так:

header {
 background: url("../img/header.jpg");
 background-size: cover;
 min-height: 595px;
 font-family: Myriad Pro;
 color: #FFF;
 text-align: center;
 font-weight: bold;
 padding-top: 60px;
}

.headerForm {
 background-color: rgba(0, 0, 0, 0.6);
 border-radius: 8px;
 margin-top: 25px;
 padding: 25px;
 text-align: left;
 height: 100%;
}

.form {
 color: #fff;
 text-align: center;
 width: 100%;
}

.form input {
 color: #a5a5a5;
 margin-right: 5px;
 margin-top: 10px;
}

.headerVideo {
 border: 10px #FFF solid;
 border-radius: 8px;
 margin-top: 25px;
 margin-bottom: 25px;
}
<div class="container-fluid">
 <div class="row">
  <div>
   <header>
    <h2>Title</h2>
    <small>Slogan</small>
    <br>
    <div class="col-sm-6">
     <div class="headerForm">
      <h3>
       Be contacted by a  and receive
       updates about the new .
      </h3>
      <small class="form">
       Sign up for information about , events,
       demonstrations and more.
      </small>
      <form action="#" class="form">
       <input type="text" name="firstname" value="Etunimi">
       <input type="text" name="lastname" value="Sukunimi">
       <input type="email" name="email" value="Sähköposti">
       <input type="phone" name="phone" value="Puhelinnumero">
       <input type="text" name="address" value="Osoite">
       <input type="text" name="postal" value="Postinumero">
       <br>
       <input type="submit" value="Submit">
      </form>
     </div>
    </div>
    <div class="col-md-6">
     <div class="headerVideo embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/gkTb9GP9lVI" allowfullscreen></iframe>
     </div>
    </div>
   </header>
  </div>
 </div>
</div>

Вот как это отображается в браузере: демонстрация

Этот красный прямоугольник показывает, что левый div не имеет такую ​​же высоту, как правый div. Я хочу, чтобы они были одного роста, всегда. Любая помощь приветствуется!

Источник

2 ответа

Решение

Ответ за это был очевиден. Добавлены фиксированные высоты для.headerVideo и.headerForm, а также фиксированные поля.

.headerVideo {
    border: 10px #FFF solid;
    border-radius: 8px;
    margin-top: 25px;
    margin-bottom: 25px;
    height: 300px;
}

.headerForm {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    margin-bottom: 25px;
    padding: 25px;
    text-align: left;
    height: 300px;
}
Источник

У тебя есть padding: 25px; в .headerform но margin-bottom: 25px; в .headerVideo, попробуйте сделать то же самое для обоих

.headerForm {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  margin-top: 25px;
  margin-bottom: 25px;
  text-align: left;
  height: 100%;
}
Источник
Другие вопросы по тегам