Heyecan Bootstrap Legacy: açıklıklı

Question

üzerinde Üniforma yüksekliği aşağıdaki resme bakın:

İlk sütun yüksekliğiyle aynı olması B sütununu büyütmek için, ya da ben birkaç sütun olsaydı onlar her zaman korur gerekenler Aynı yükseklik, en büyük sütun yüksekliğine ayarlanıyor.

<div class="clearfix"></div> ve height: 100% ile herhangi bir başarı olmadan bir süredir oynuyorum.

Kullanıyorum Twitter Bootstrap 2.3.2.

HTML:

<div id="main" class="row-fluid"> 
     <div class="span6"> 
      <div> 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
       BBBBBBBBBBBBBBBBBBBBBBBBBB 
      </div> 
     </div> 
     <div class="span6"> 
      <div> 
       B 
      </div> 
     </div> 
    </div> 

CSS: Nedense

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css"); 

     #main { 
      height: 5em; 
     } 
     .span6 { 
      background-color: lightgray; 
      border: 1px solid red; 
     } 

     .span6 > div { 
      background-color: lightblue; 
      border: 1px solid green; 
     } 

keman bir test.html yapıştırmak değilse yukarıdaki kod ile görüntüyü andıran, ama yapacak düzgün çalışıyor.

DÜZENLEME:

Ve nasıl iç span div s yüksekliğini uyumlulaştırabilirsiniz?

DÜZENLEME 2:

@Coop rehberliğinde Sonunda bu dizildi var başardı.

var content_height = []; 

jQuery('.row-fluid > div') 
    .each(function() { 
     content_height.push(jQuery(this).css({minHeight: 0}).height()); 
    }) 
    .each(function() { 
     jQuery(this).css({ 

     minHeight: Math.max.apply(Math, content_height) 
     }); 
    }); 

Answer 1

ile yayılma büyük negatif farkla birlikte büyük dolgu ekleyerek bunu ve daha sonra sarabilirsiniz bakınız: Aşağıdaki kodu gelmek Bunu bir jQuery çözümü ile yapmak için:Sınıfı ilk olarak ekleyin.Bir satırdaki tüm divlaraaynı yükseklikte vermek istersiniz. Ardından aşağıdaki jQuery ekleyin: Burada

$('.eHeight').each(function() { 
    var eHeight = $(this).parent().innerHeight(); 
    $(this).outerHeight(eHeight); 
}); 

bakınız keman: daha yüklenmeden Google Chrome görüntülere 0 yükseklik ve genişlik verir çünkü jQuery $(window).load olması gerektiğini http://jsfiddle.net/VA6D4/

Not.

Answer 2

bu Fiddle Sen overflow: hidden;

CSS

.sameheight { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:green; 
} 
.wrap { 
    overflow: hidden; 
}