Div öğesi, içeren td'nin yüksekliğine nasıl uyulur?

Tablo sırasındaki üç "panel" var. Biri diğer ikiden daha uzun ve üç panelin de en yüksek olanın yüksekliğine uymasını istiyorum. Yükseklikleri% 100 ile şekillendirmeyi denedim, ancak içerdiği tds büyüdükçe kısa paneller kısa kalıyor.Div öğesi, içeren td'nin yüksekliğine nasıl uyulur?

HTML'im JSF tarafından oluşturuldu, bu nedenle form üzerinde sınırlı denetim var, ancak stilleri değiştirebilirim. Oluşturulan kodun basitleştirilmiş bir sürümünü aşağıda yaptım. Aynı sorun IE8 ve Firefox'ta da ortaya çıkıyor. Bununla birlikte, IE8, kısa panelleri dikey olarak td'nin tepesine hizalar, Firefox ise bunları ortada yapar. hile yapmak gerekir Bunlardan

<html> 
<head> 
    <title>Test Table</title> 
    <style TYPE="text/css"> 
     td {border: 1px solid red; padding: 1px;} 
     .panel {border: 1px solid blue; padding: 1px;height:100%} 
     .panel-header{background-color: green; color: white;} 
     .panel-body {border: 1px solid green; padding: 1px; height:100%;} 
    </style> 
</head> 
<body> 
    <h1>Test Table</h1> 
    <table width="100%"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="panel" style="height:200px;"> 
        <div class="panel-header"> 
        Header One 
        </div> 
        <div class="panel-body"> 
        Body One 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel" style="height:100%;"> 
        <div class="panel-header"> 
        Header Two 
        </div> 
        <div class="panel-body"> 
        Body Two 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel"> 
        <div class="panel-header"> 
        Header Three 
        </div> 
        <div class="panel-body"> 
        Body Three 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
<html>

kaynak

2011-02-07 Greg Charles

Bunu jQuery ile yazmam için bir yol ekledim. Umut ediyorum bu yardım eder! –

Mutlak konumlandırma ile yapabilirsiniz, [bu yanıtı] gözden geçirin (http://stackoverflow.com/a/33943557/1677209). – T30

Beş yıl sonra, o anda oluşturduğum asıl sayfaya karşı test edemiyorum, ama sadece Fiddle'i denemek üzereyim, üzgünüm, ama hiç işe yaramıyor. Karşılaştığım sorunu yanlış anlamış olabilirsiniz. Her halükarda, Richard'ın jQuery çözümü iyi sonuç verdiğini öne sürdü. –

Tds (veya tablo) için açıkça bir yükseklik belirtmeden yüksekliği% 100'e ayarlayabileceğinizi düşünmüyorum. height:100%'un yürürlüğe girmesinden önce üst öğede açık bir yükseklik belirtmeniz gerektiği anlaşılıyor. Belki de stilinizi, div konteynerleri yerine td etiketlerinde olacak şekilde değiştirebilirsiniz.

Tanrılar orta yerine üst üste hizalanmaya yardımcı oluyorsa, bunun nasıl yapılacağına dair bir örnek hazırladım (vertical-align:top; td etiketlerine). Ben de sadece divları kullanarak bir örnek yaptım, ama onun formu üzerinde sınırlı kontrole sahip olduğunu söylediğini biliyorum.

Bir öğenin maksimum yüksekliğini biliyorsanız, tabloyu veya tablo hücrelerini bu yüksekliğe ayarlayarak (örn. height:200px;)% 100'ün div'lar üzerinde etkili olması gerekir.

Düzenleme jQuery'yi kullanmaya ters davranmıyorsanız, ihtiyacım olanı yapmak için örneğimi here güncelledim.

kaynak

2011-02-07 20:39:39

Drackir doğru, tablo TD elemanı bir yükseklik değeri belirtmiyor, bu yüzden yükseklik% 100 soran çocuk elemanları bunu hesaplayamayacaktır. Drackir'ın dediği gibi, TD'lerin yüksekliğini manuel olarak ayarlayabilirsiniz. VEYA ... onlar için yüksekliği% 100 olarak belirleyebilir, DIV'lerin yüksekliğini% 100 olarak belirtebilir ve tablonun yüksekliğini belirtebilirsiniz. Ayrıca, masaya da% 100 yükseklik uygulayabilirsiniz. tablo ana öğesinden yükseklik değerini alacaktır, bu ideal olmayabilir, ancak tüm div'lerin herhangi bir DIV'ye daha fazla içerik ekledikçe tüm yüksekliklerin aynı yükseklikte olmasına izin verecektir. – Nick

Evet, tüm tablonun büyümesinin daha fazla çalışmasına izin vermeli veya Tablonun sadece tek bir satırı olduğunda, ancak gerçek tablomda birkaç satır var, td öğelerinin kendilerini nasıl yeniden boyutlandıracaklarını bildikleri, ancak bu bilgileri içerdikleri divlara aktarabilecekleri bir utanç duyuyorum. yeniden boyutlandırabilir ve panellere ekleyebilir bir komut üzerinde çalışmaya gidiyor ize olay. Eğer işe alabilirsem, buraya gönderirim. (Big if!) –

@Greg Charles: jQuery'yi kullanmaya ters davranmıyorsanız, postama ne istediğinizi ekledim. –

height=100%; 
or 
height=inherit;

biri :)

kaynak

2011-02-07 20:15:48 Milaan

OP zaten "height: 100%" seçeneğine sahiptir ve şöyle der: "Yükseklikleri% 100 ile şekillendirmeyi denedim, ancak kısa paneller, içerdiği tds büyüyse bile kısa kalıyor." Ayrıca, bunların CSS olması gerekiyorsa, eşit bir işaret yerine iki nokta üst üste kullanmanız gerekir. –

Belki de şu soruyu anlamıyorum :) Ama miras o zaman çalışmalı ... Ya da belki de TD'yi stil etmeli (ama istediği bu değil). Ve evet, bir ':' kullanmanız gerekir. Ama hızlı yazıyordum: $ Üzgünüm :) – Milaan

Sadece bilmeni istedim. Cevabınızı kolonları eklemek için düzenleyebilirsiniz. :) Sol alt tarafında bir düzenleme bağlantısı var. –

Çözümümün: http://jsfiddle.net/k6Dam/2/

Kaldır inline-stilleri (bunu yapabilir umut) ve min-height panelinin set -200px'ye.

kaynak

2011-02-07 20:28:27 gearsdigital

Sanırım sorun şu ki, bir bedenin bedeni diğer bedenlerin yüksekliğini geçtiğinde. Bu çözüm, buradaki sorunu çözmez (http://jsfiddle.net/Drackir/k6Dam/3/). –

@Drackir Elbette ama bu biçimlendirme ile herhangi bir kısıtlama olmaksızın bunu yapamazsınız. İlk elemanın yüksekliğini jQuery/Javascript ile okuyabilir ve verilen değere göre yüksekliği ayarlayabilir. – gearsdigital

Evet. Ne yazık ki bu tek çözüm olabilir. :( –

Div öğesi, içeren td'nin yüksekliğine nasıl uyulur?

cevap

İlgili konular