如何在不同的父div下動態設置列的相等高度

Question

我在兩個不同的父div下有三列。我需要爲這三列設定相同的高度。

在我的情況的問題是：

1. 3列在不同的父div的，不能使用顯示：表和表細胞方法
2. 有一個選項卡列表中的同事2，這將改變塊高度，當你點擊不同的標籤

3. 我試圖JS設置相等的高度，但沒有成功

   a）JS得到了col-2的錯誤高度，因爲它計算了所有部分的總高度，但不是活動部分的總高度。 b）JS設置一個固定的高度值。當我縮小窗口大小或單擊col-2中的不同選項卡時，列高不會相應調整。 col內的內容可能溢出。

HTML代碼：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div> 
    <div class="left-wraper"> 
    <header>Head1</header> 
    <div class="col-1"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
     </ul> 
    </div> 
    <div class="col-2"> 
     <header>Topic 2</header> 
     <ul class="list-inline"> 
     <li><a href="#menu1">Menu 1</a></li> 
     <li><a href="#menu2">Menu 2</a></li> 
     <li><a href="#menu3">Menu 3</a></li> 
     </ul> 
     <section id="menu1" role="tabpanel"> 
     <p> 
      This is menu1<br> This is menu1<br> This is menu1<br> 
     </p> 
     </section> 
    </div> 
    </div> 
    <div class="right-wraper"> 
    <span>Head2</span> 
    <div class="col-3"> 
     <header>Topic 2</header> 
     <p> 
     sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text 
     </p> 
    </div> 
    </div> 
</div> 

CSS代碼：

.left-wraper { 
    width: 65%; 
    float: left; 
    padding: 8px; 
    background-color: #b3ffcb; 
} 

.right-wraper { 
    width: 28%; 
    float: left; 
    padding: 8px; 
    margin-left: 8px; 
    background-color: #ffccef; 
} 

.col-1 { 
    width: 30%; 
    float: left; 
    background-color: #e6ccfe; 
} 

.col-2 { 
    width: 70%; 
    float: left; 
    background-color: #ffeecd; 
} 

.col-3 { 
    width: 100%; 
    float: left; 
    background-color: #b3d9ef; 
} 

JSFiddle Demo

需要一種方法來動態地設置成等於高度爲塊紫色，黃色和藍色在上面的演示。不僅僅是在加載時，還可以點擊不同的標籤或調整屏幕大小。

Answer 1

嘗試display:flex：

.left-wraper { 
 
    display: flex; 
 
    width: 65%; 
 
    float: left; 
 
    padding: 27px 8px 8px; 
 
    background-color: #b3ffcb; 
 
} 
 

 
.right-wraper { 
 
    width: 28%; 
 
    float: left; 
 
    padding: 8px; 
 
    margin-left: 8px; 
 
    background-color: #ffccef; 
 
} 
 

 
.col-1 { 
 
    width: 30%; 
 
    float: left; 
 
    background-color: #e6ccfe; 
 
} 
 

 
.col-2 { 
 
    width: 70%; 
 
    float: left; 
 
    background-color: #ffeecd; 
 
} 
 

 
.col-3 { 
 
    width: 100%; 
 
    float: left; 
 
    background-color: #b3d9ef; 
 
} 
 
.outer_div { 
 
    display: flex; 
 
    } 
 
.left-wraper > header { 
 
    position: absolute; 
 
    top: 6px; 
 
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="outer_div"> 
 
    <div class="left-wraper"> 
 
    <header>Head1</header> 
 
    <div class="col-1"> 
 
     <ul> 
 
     <li>Coffee</li> 
 
     <li>Tea</li> 
 
     <li>Milk</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-2"> 
 
     <header>Topic 2</header> 
 
     <ul class="list-inline"> 
 
     <li><a href="#menu1">Menu 1</a></li> 
 
     <li><a href="#munu2">Menu 2</a></li> 
 
     <li><a href="#">Menu 3</a></li> 
 
     </ul> 
 
     <section id="menu1" role="tabpanel"> 
 
     <p> 
 
      This is menu1<br> This is menu1<br> This is menu1<br> 
 
     </p> 
 
     </section> 
 
    </div> 
 
    </div> 
 
    <div class="right-wraper"> 
 
    <span>Head2</span> 
 
    <div class="col-3"> 
 
     <header>Topic 2</header> 
 
     <p> 
 
     sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text<br> sample text 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我會建議添加一個實用程序類來分開您在css和js中執行的操作。 我已經更新了你的小提琴。下面的代碼將爲你加載和點擊。我需要在更多的上下文中看到它的大小，因爲它保持了小提琴的高度或調整大小。

var $body = $('body'); 
findHeight('.findHeight'); 

function findHeight(el){ 
    var heightArr = []; 
    $(el).each(function(){ 
     heightArr.push($(this).outerHeight()); 
    }); 
    var tallest = Math.max.apply(null, heightArr); 
    $(el).css('height', tallest); 
    heightArr = []; 
} 

$body.on('click', 'div[class^="col-"]', function(){ 
    findHeight('.findHeight'); 
}); 

http://jsfiddle.net/d16b7932/

你會發現我已經添加了類findHeight對有問題的內容。你可以把它改成任何你想要的。只要確保在js中做到這一點。

Answer 3

¿您是否在尋找類似的東西？

CSS .col-height { height: 100vh; }

HTML ... <div class="col-1 col-height"> ... <div class="col-2 col-height"> ... <div class="col-3 col-height">

Answer 4

看起來你可以使用Flexbox的，方便的模塊與LAYO幫助UTS。這裏有一個鏈接到一個指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

你基本上要Flexbox的CSS添加到您的左邊和右邊包裝的母公司股利，並提出一些補充的CSS如下所示：

HTML：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class='wrapper'> 
    <div class="left-wraper"> 
    <header class="header">Head1</header> 
    <div class='col-wrapper'> 
    <div class="col-1"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
     </ul> 
    </div> 
    <div class="col-2"> 
     <header>Topic 2</header> 
     <ul class="list-inline"> 
     <li><a href="#menu1">Menu 1</a></li> 
     <li><a href="#munu2">Menu 2</a></li> 
     <li><a href="#">Menu 3</a></li> 
     </ul> 
     <section id="menu1" role="tabpanel"> 
     <p> 
      This is menu1 
      <br> This is menu1 
      <br> This is menu1 
      <br> 
     </p> 
     </section> 
    </div> 
    </div> 
    </div> 
    <div class="right-wraper"> 
    <span>Head2</span> 
    <div class="col-3"> 
     <header>Topic 2</header> 
     <p> 
     sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     <br> sample text 
     </p> 
    </div> 
    </div> 
</div> 

CSS：

.wrapper { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.wrapper > * { 
    padding: 10px; 
    flex: 1 100%; 
} 

.col-wrapper { 
    flex: 5; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

.left-wraper { 
    width: 65%; 
    float: left; 
    padding: 8px; 
    background-color: #b3ffcb; 
    flex-grow: 2; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: column wrap; 
    flex-flow: column wrap; 
} 

.right-wraper { 
    width: 28%; 
    float: left; 
    padding: 8px; 
    margin-left: 8px; 
    background-color: #ffccef; 
    flex-grow: 1; 
} 

.header { 
    width: 100%; 
} 

.col-1 { 
    width: 30%; 
    float: left; 
    background-color: #e6ccfe; 
    order: 1; 
} 

.col-2 { 
    width: 70%; 
    float: left; 
    background-color: #ffeecd; 
    flex: 3 0px; 
    order: 2; 
} 

.col-3 { 
    width: 100%; 
    float: left; 
    background-color: #b3d9ef; 
} 

http://jsfiddle.net/8ydoxj8m/

祝你好運！