我有一行包含四个面板。我希望所有面板的高度都相同。例如：由于在第二个面板中添加了内容，它的高度发生了一些变化，并且与其他面板的高度不同。我希望自动更改所有其他面板的高度。 我的面板最小高度为250像素。如果其中一块面板的高度超过250像素，则所有面板都应自动调整。如果其中一块面板的高度小于250像素（内容传递到面板）动态），高度应保持为250像素。
我的问题（图片）link
在上图中，第二个面板内容已更改，但其余面板均处于原始高度。
我需要什么（图片）link
我的代码
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default" style="min-height:250px;">
<div class="panel-body">
Panel
</div>
</div>
</div>
</div>
</div>
请帮我解决我的问题。 我们可以单独使用css，还是应该使用Js？
答案 0 :(得分：3)
由于你使用的是Bootstrap，你也必须使用jQuery，所以我在这里使用它。首先设置高度，然后迭代ll面板以找到最大高度并设置它，然后将该高度应用于所有面板。
这允许将所有面板设置为相同的高度，并且如果显示的高度高于其他面板，则会进行调整。请注意，您应该已经设置了最小高度。这只是一个起点。你还应该删除那个最小高度的内联样式，并将它放在HTML之外的CSS中。
var maxHeight=250;
$('.panel').each(function(){
var height=$(this).height();
if(height> maxHeight){maxHeight=height}
});
$('.panel').css('height',maxHeight+'px');
答案 1 :(得分：3)
如果您更喜欢纯css解决方案，可以使用flex轻松完成此操作。请注意，使用此解决方案时，您必须牢记浏览器支持。见这里：http://caniuse.com/#search=flex
但是使用css和flex你可以做到：
.wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.innerdiv {
width: 22%; /* 4 items per row */
float: left;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: red;
margin: 0 1%;
min-height: 250px; /* Your min-height if needed */
}<div class="wrapper">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
你当然需要在你的html / classes等中实现这一点。很抱歉没有直接提供它，但只是快速编写了代码片段。
修改
好吧，我也会采用jQuery的方式来做这个，所以如果你使用它，你不需要担心浏览器支持。也许这将有助于未来的人。您还可以在javascript中检查浏览器对flex的支持，并使用jQuery来设置div的高度。
(function($, window, document, undefined) {
'use strict';
var doc = document.body || document.documentElement,
doc = doc.style;
// This would check the browser support for flex and only use this fallback if there is no support (otherwise use css)
/*
if(doc.webkitFlexWrap == '' || doc.msFlexWrap == '' || doc.flexWrap == '') {
return true;
}
*/
var $wrapper = $('.wrapper'),
$items = $wrapper.find('.innerdiv'),
setDivHeight = function() {
$items.css('height', 'auto');
var itemsPerRow = Math.floor($wrapper.width() / $items.width());
if(itemsPerRow == null || itemsPerRow < 2) {
return true;
}
for(var i = 0, j = $items.length; i < j; i += itemsPerRow) {
var maxHeight = 0,
$item = $items.slice(i, i + itemsPerRow);
$item.each( function() {
var itemHeight = parseInt($(this).outerHeight());
if (itemHeight > maxHeight) {
maxHeight = itemHeight;
}
});
$item.css('height', maxHeight);
}
};
setDivHeight();
$(window).on('resize', setDivHeight);
$wrapper.find('img').on('load', setDivHeight);
})(jQuery, window, document);.innerdiv {
width: 22%;
float: left;
background-color: red;
margin: 0 1%;
min-height: 250px; /* your min-height if needed */
}
img {
height: auto;
width: 100%;
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="http://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" alt="Large image" />
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
编辑2：
我还添加了一种方法来监视jQuery函数中的图像加载并重新计算每个图像加载的高度。
答案 2 :(得分：2)
使用display:flex并重用Twitter Bootstrap类。写得少，做得更多！
.row {
display: flex;
}
.row .col {
display: flex;
align-items: stretch;
}
.row .col .panel {
width: 100%;
}
.row .col .panel .panel-body {
min-height: 250px;
}
答案 3 :(得分：0)
以这种方式将min-height设置为 panel-body
CSS
s///gHTML
.panel-body{
min-height:250px !important;
}
答案 4 :(得分：-1)
您可以使用名为Match Height
的非常简单易用的jQuery插件来完成此操作此库的某些功能在其他解决方案中找不到（简单的）
答案 5 :(得分：-1)
＆LT;脚本＆GT;
var a = Math.max（document.getElementById（“left”）。offsetHeight，document.getElementById（“center”）。offsetHeight，document.getElementById（“right”）。offsetHeight）; //获得最大高度
document.getElementById（“left”）。style.height = a +“px”;
document.getElementById（“center”）。style.height = a +“px”;
document.getElementById（“right”）。style.height = a +“px”;
＆LT; /脚本＆GT;
<script>
var a = Math.max(document.getElementById("left").offsetHeight,document.getElementById("center")
.offsetHeight,document.getElementById("right").offsetHeight);
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>