根據內容調整一行中所有面板的高度

Question

我有一行包含四個面板。 我希望所有面板的高度都相同。 例如：由於在第二個面板中添加了內容，它的高度發生了一些變化，並且與其他面板的高度不同。我希望自動更改所有其他面板的高度。 我的面板最小高度為250像素。如果其中一塊面板的高度超過250像素，則所有面板都應自動調整。如果其中一塊面板的高度小於250像素（內容傳遞到面板）動態地），高度應保持為250像素。

我的問題（圖片） 鏈接

在上圖中，第二面板內容被改變，但其余面板處於原始高度。

我需要什么（圖像） 鏈接

我的代碼

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

Answer 1

由於你使用的是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');

Answer 2

如果你更喜歡純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設置di​​v的高度作為后備。

 (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函數中的圖像加載並重新計算每個圖像加載中的高度。

Answer 3

使用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;
}

https://jsfiddle.net/alexndreazevedo/143ez30b/

Answer 4

以這種方式將min-height設置為panel-body

CSS

.panel-body{
   min-height:250px !important;
}

HTML

<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
    <div class="panel-body">
        Panel
    </div>
</div> 
</div> 
</div> 
</div> 

Answer 5

您可以使用名為Match Height的非常容易使用的jQuery插件來完成此操作

這個庫的一些功能，你在其他解決方案中找不到（簡單的）

1. 自動匹配元素組的高度
2. 使用最大高度或定義特定目標元素
3. 頁面上的任何位置以及DOM中的任何位置
4. 響應（窗口大小更新）
5. 行感知（處理浮動元素和包裝）
6. 框大小和混合填充，邊距，邊界值的帳戶
7. 處理圖像和其他媒體（加載后更新）
8. 支持隱藏或不可見的元素（例如標簽控件內的元素）
9. 節流以平衡性能和平穩性
10. 在需要時輕松移除
11. 保持滾動位置

Answer 6

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

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