Tam hücre yüksekliğini işgal etmek için div alma

Hücrenin tüm yüksekliğini işgal etmek için tablo hücrelerine nasıl div alabilirim?Tam hücre yüksekliğini işgal etmek için div alma

Div yüksekliğini ayarlama =% 100, masa hücresinde sabit bir yükseklik olmadıkça çalışmaz, ancak bunu yapamıyorum çünkü hücreler değişken içeriğe bağlı olarak sıvı yüksekliğe sahip olmalıdır.

Her satırdaki tüm div'lerin, satırın aynı yüksekliğinde olmasını sağlamaya çalışıyorum. kod aşağıda

, ben CSS kullanarak tek çözüm olabilecek geldi biraz daha araştırma ve deney sonrasında http://www.songtricks.com/CellDivBug.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<style type="text/css"> 

td 
{ 
    padding:0px; 
    vertical-align:top; 
    height:auto; 
} 

.box 
{ 
    margin:0px; 
    border:solid 2px red; 
    height:100%; 
} 

</style> 


</head> 

<body> 

    <table border="1" width="50%"> 
    <tr> 
     <td width="50%"> 
      <div class="box"> 
      This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. This box has a lot of text. 
      </div> 
     </td><td width="50%"> 
      <div class="box"> 
      This box has a little text. 
      </div> 
     </td>   
    </tr> 
    </table> 

</body> 
</html>

canlı bir örneğini görüyoruz. Kendi sorumu cevaplamak için çok yeni, bu yüzden buraya gönderiyorum.

koyun pozisyonuna:

Temelde oluşan tablo hücreleri üzerinde göreceli
koyun position: absolute; En: 0; Sol: 0; Sağ: 0; alt: 0; div yanında değil onun içinde
koyun içeriği doğrudan hücre içinde bulunan bölümlerde; üzerinde, mü bazı Googling

Bkz demo http://jsfiddle.net/ehLVM/

kaynak

2011-04-20 Stephen

Sadece merak, sen td yerine .box sınır css hareket edemez neden? Bu, tüm kutuları aynı boyuta getirmeyi kolaylaştırır. – Rasika

Kullanım durumunuza bağlı olarak, 'table's (veya JavaScript) kullanmayan bir yöntem düşünebilirim. Göndermeli miyim? Biraz kıvrımlı. – thirtydot

@thirtydot, evet lütfen. I-ebilmek almak olası herhangi bir cevapları arıyorum ... – Stephen

de içerik yüksekliğini almak için hücreleri zorlamak ve bir de this thread bulundu forum. CSS ile bunu yapmak imkansız gibi görünüyor. Ancak bunun bir JavaScript çözümü var. Yukarıdaki yorumda önerildiği gibi, neden sınır CSS'yi td'ye taşımanız gerekmiyor?

kaynak

2011-04-20 23:08:29 Rasika

Cevabınız için teşekkürler. JS'yi kullanmaktan kaçınmak için, hücreye sınırı koyamıyorum çünkü div aslında grafik parçalarını kullanarak 8 parçalı bir 3D kenarlık oluşturan karmaşık bir yapıdır. – Stephen

Bağlantıda bulunan yazıya göre, bunu yapmak imkansızdır. tarayıcı tutarsızlığı nedeniyle tamamen css yoluyla. – Rasika

bu deneyin:

table { height: 100%; } 

td 
{ 
    padding:0px; 
    vertical-align:top; 
    height:100%; 
} 

.box 
{ 
    margin:0px; 
    border:solid 2px red; 
    height:100%; 
}

Working Sample

kaynak

2011-04-23 04:49:06

Teşekkürler Ronak, bu teşvik ediyor. FF ve Chrome'da iyi çalışıyor ama IE değil. Herhangi bir fikir neden? – Stephen

bunu kullanabilirsiniz Could (FF4 üzerinde test)? Bununla birlikte tüm div'ları aynı boyuta bağlar.

function equalHeight(group) { 
    var tallest = 0; 
    group.each(function() { 
     var thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 
    group.height(tallest); 
}

Kaynak: http://www.cssnewbie.com/equal-height-columns-with-jquery/

kaynak

2011-04-30 19:44:26 ethicka

Tam hücre yüksekliğini işgal etmek için div alma

cevap

İlgili konular