我无法解决这个特殊问题。我需要做的是让我的布局上的所有列具有相同的高度，问题 - 通常是 - 所有这些列都可以具有不同的信息，这意味着如果我不使用它们，它们将具有不同的高度最小高度。
使用min-height或MatchHeight Jquery插件实际上很容易解决。问题是当用户点击每个框末尾的“másinformación”链接时，容器将扩展其高度并显示更多信息，这种行为导致MatchHeight插件以不同的方式工作并打破布局。任何帮助都将非常感激。
flexbox或jquery解决方案对我有用。
Here's a Pencode where you can check the problem
这是HTML：
<section class="content col-lg-10 col-md-12 col-xs-12 col-lg-offset-1">
<section class="employees">
<div class="row">
<div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<h5 class="area">Recovery</h5>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
<h5>cgomez@anticipa.com</h5>
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García BoledaRaúl García Boleda Raúl García Boleda Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<h5 class="area">Recovery</h5>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="box-container col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
</div>
</section>
<section class="employees">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h4 class="position">Asset Manager</h4>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="employee-box">
<img src="assets/img/employees/avatar-employee.png" alt="">
<h3>Raúl García Boleda</h3>
<h4 class="position">Asset Manager</h4>
<h5 class="area">Recovery</h5>
<div class="extra-info">
<h3>Teléfonos</h3>
<h5 class="area">M. corto: 20 453 7621</h5>
<h5 class="area">Móvil: 20 453 7620</h5>
<h5 class="area">Ext.: 20 750 9441</h5>
<h5 class="area">Fijo: 20 750 9442</h5>
<h3>Email</h3>
cgomez@anticipa.com
<h3>Ubicación</h3>
<h5 class="area">Planta 2, Área 5</h5>
</div>
<span class="dropdown">más información</span>
</div>
</div>
</div>
</section>
</section>
这是SCSS：
/*Colors*/
$body-blue: #ebeff2;
$deep-blue: #013662;
$light-blue: #0160a2;
$off-blue: #91bfdf;
$secondary-blue: #003561;
$title-bg: #c5d8e8;
$white: #fff;
body {
background-color: $body-blue;
color: #999;
display:flex;
flex-direction:column;
font: 300 16px 'Asap-Regular', sans-serif;
margin:0;
min-height: 100%;
padding:0;
}
@mixin article-box {
background-color: $white;
box-shadow: 0 0.125em 0.125em rgba(0, 53, 97, 0.05);
.date {
font-size: 0.75em;
text-transform: uppercase;
}
p {
color: #0060a1;
font-size: 1em;
line-height: normal;
}
}
.box-container {
position:relative;
height:17em;
}
.employee-box {
@include article-box;
margin-bottom:1em;
padding:1em;
text-align:center;
width:100%;
h3,h4,h5 {
line-height:.8em
}
h3 {
color:$secondary-blue;
font-size: 0.875em;
font-weight: 700;
}
.area {
font-size: 0.875em;
font-weight: 400;
}
.extra-info {
display:none;
}
.position {
color: $secondary-blue;
font-size: 0.875em;
font-weight: 400;
}
.dropdown {
background:url(../img/forms/down-arrow.png) no-repeat left 50%;
color: #005fa0;
cursor:pointer;
display:inline-block;
font-size: 0.875em;
font-weight: 400;
margin-top: 2em;
padding-left:1em;
vertical-align: middle;
}
&.current {
background-color:#0160a2;
color:#9cc4e7;
max-height:500px;
position: relative;
z-index: 9999;
h3 {
color: white;
}
h4 {
color:#9cc4e7;
}
.dropdown {
background:url(../img/forms/up-arrow.png) no-repeat left 50%;
color: white;
}
.extra-info {
display:block;
}
}
}
答案 0 :(得分：0)
这是我可以得到它而不诉诸JavaScript技巧。
<script>
if (document.referrer.indexOf('localhost:81/test1.html') == -1) window.location = 'test1.html'
</script>
$('.main-menu ul li').click(function(e) {
$('.main-menu ul li').not($(this)).removeClass('current');
$(this).toggleClass('current');
});
$('.employee-box .dropdown').click(function(e) {
$('.employee-box .dropdown').not($(this)).closest('.employee-box').removeClass('current');
$(this).closest('.employee-box').toggleClass('current');
});/*Colors*/
.row {
margin-bottom: 3rem;
display: flex;
}
body {
background-color: #ebeff2;
color: #999;
display: flex;
flex-direction: column;
font: 300 16px 'Asap-Regular', sans-serif;
margin: 0;
min-height: 100%;
padding: 0;
}
.box-container {
position: relative;
height: 17em;
}
.employee-box {
background-color: #fff;
box-shadow: 0 0.125em 0.125em rgba(0, 53, 97, 0.05);
margin-bottom: 1em;
padding: 1em;
min-height: 100%;
text-align: center;
width: 100%;
}
.employee-box .date {
font-size: 0.75em;
text-transform: uppercase;
}
.employee-box p {
color: #0060a1;
font-size: 1em;
line-height: normal;
}
.employee-box h3, .employee-box h4, .employee-box h5 {
line-height: 0.8em;
}
.employee-box h3 {
color: #003561;
font-size: 0.875em;
font-weight: 700;
}
.employee-box .area {
font-size: 0.875em;
font-weight: 400;
}
.employee-box .extra-info {
display: none;
}
.employee-box .position {
color: #003561;
font-size: 0.875em;
font-weight: 400;
}
.employee-box .dropdown {
background: url(../img/forms/down-arrow.png) no-repeat left 50%;
color: #005fa0;
cursor: pointer;
display: inline-block;
font-size: 0.875em;
font-weight: 400;
margin-top: 2em;
padding-left: 1em;
vertical-align: middle;
}
.employee-box.current {
background-color: #0160a2;
color: #9cc4e7;
max-height: 500px;
position: relative;
z-index: 9999;
}
.employee-box.current h3 {
color: white;
}
.employee-box.current h4 {
color: #9cc4e7;
}
.employee-box.current .dropdown {
background: url(../img/forms/up-arrow.png) no-repeat left 50%;
color: white;
}
.employee-box.current .extra-info {
display: block;
}