Bootstrap 嵌入视频和 div 高度相同答案

【问题标题】：Bootstrap embedded video and div same heightBootstrap 嵌入视频和 div 高度相同
【发布时间】：2015-10-16 14:36:07
【问题描述】：

我正在使用引导程序，我希望嵌入的视频和 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 的高度不同。我希望它们始终保持相同的高度。任何帮助表示赞赏！

【问题讨论】：

标签： html height embedded-video

【解决方案1】：

您在.headerform 中有padding: 25px;，但在.headerVideo 中有margin-bottom: 25px;。尝试对两者都做同样的事情

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

【讨论】：

【解决方案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;
}

【讨论】：