Bootstrap嵌入式视频和div相同的高度

Question

我正在使用bootstrap，我希望有一个嵌入式视频和div并排相同的高度。尝试在SO上发布不同的解决方案，但无法使其中任何一个起作用。

HTML＆amp; CSS是这样的：

<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>   

{{1}}

以下是它在浏览器中的显示方式：

那个红色矩形表示左边div与右边div的高度不同。我希望他们总是一样高。任何帮助表示赞赏！

Answer 1

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%; } []。 尝试为两者做同样的事情

,\n?[\]}]

Answer 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;
}