調整Bootstrap中的垂直高度對齊以匹配相鄰高度？

我有一個彩色背景的左邊菜單，應該始終與正確內容的高度相匹配。問題是，正確的內容通常比左邊的信息更多，因此它們不平衡......並且帶有顏色，這是非常明顯的。我的第一個想法是身高100％，但這並不能解決問題。在下面的小提琴中，您可以給出300px等高度來填充空間，但我寧願不對其進行硬編碼，因爲在較小的分辨率下它看起來很雜亂，而且所有的高度都可能是不必要的。是否有任何干淨的方法來進行相應的調整？提前致謝。調整Bootstrap中的垂直高度對齊以匹配相鄰高度？

http://jsfiddle.net/YSmK7/5/

HTML

<div class="container"> 
    <div class="row padB"> 
     <!-- tie together left and right --> 
     <div class="col-md-3 padT delLtBlueBg" style='height: contain !important'> 
      <!-- left column --> 
      <div class='row padB'> 
       <!-- left header section --> 
       <div class="col-md-11"> 
        <label>Integrated Models</label> 
       </div> 
      </div> 
      <!-- left options --> 
      <div class="col-md-12 padT padB nPadL nPadR selectFilter"> 
       <label class='padL'>Reference</label> 
      </div> 
     </div> 
     <!-- /left column --> 
     <div class="col-md-9 padT nPadL nPadR"> 
      <!-- right column --> 
      <div class="col-md-12 text-center padT"> 
       <h4 class='text-left'>Reference</h4> 

       <h6 class='text-left padB'>*Please select a reference case or scenario to activate the footer menu</h6> 

       <table class='allW zebra' cellpadding='5' cellspacing='5'> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Status</th> 
          <th>Iterations</th> 
          <th>Error Level</th> 
          <th>Percentage Completed</th> 
          <th>Time Taken</th> 
          <th>Options</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>New Scenario 3</td> 
          <td><span class="glyphicon glyphicon-ok-sign delGreen"></span> Complete</td> 
          <td>500</td> 
          <td>0.4907</td> 
          <td>100</td> 
          <td>00:03:10</td> 
          <td><span class="glyphicon glyphicon-trash delGreen" title='Delete'></span> 
          </td> 
         </tr> 
         <tr> 
          <td>New Scenario 4</td> 
          <td><span class="glyphicon glyphicon-ok-sign delGreen"></span> Complete</td> 
          <td>500</td> 
          <td>0.4707</td> 
          <td>100</td> 
          <td>00:04:10</td> 
          <td><span class="glyphicon glyphicon-trash delGreen" title='Delete'></span> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       <div class='col-md-12 spacer'></div> 
       <div class='col-md-12 spacer'></div> 
       <div class='col-md-12 spacer'></div> 
      </div> 
     </div> 
     <!-- /right column --> 
    </div> 
    <!-- /row --> 
    <div class="row padT padB navbar navbar-inverse"> 
     <div class="allW padT footerIcons nPadL nPadR text-center"></div> 
    </div> 
    <footer class='container navbar-fixed-bottom padB'> 
     <hr> 
     <div class='col-md-6'>Copyright © 2013 All rights reserved.</div> 
     <div class='col-md-6 text-right'> <a href='#'>About</a> | <a href='#'>Contact</a> 

     </div> 
    </footer> 
</div> 
<!-- /container -->

來源

2013-10-30 triplethreat77

你張貼在撥弄了錯誤的代碼？ –

不，左邊的藍色方框需要填寫左欄以匹配右邊的高度。 – triplethreat77

我添加了一個ID在你的右邊欄，這樣我可以參考它。

<!-- /left column --> 
    <div class="col-md-9 padT nPadL nPadR" id="rightColumn">

這裏是jQuery的

$(document).ready(function(){ 
    $('.delLtBlueBg').height($('#rightColumn').height()); 
});

http://jsfiddle.net/zK9MA/

來源

2013-10-30 19:50:54 Trevor

這是迄今爲止我見過的最簡單，最明智的同列高度解決方案！ – monalisa717

調整Bootstrap中的垂直高度對齊以匹配相鄰高度？

回答

相關問題