Tüm tablo hücresini DIV doldurma

Bu soruyu gördüm ve biraz googledim , ancak şu ana kadar hiçbir şey işe yaramadı. Şimdi 2010 olduğunu düşünüyorum (bu sorular / cevaplar eski ve cevapsız) ve CSS3 var! CSS kullanarak tüm tablo hücresinin genişliğini ve yüksekliğini dolduracak bir div almanın herhangi bir yolu var mı?

Hücrenin genişliğinin ve / veya yüksekliğinin vaktinden önce ne olacağını bilmiyorum ve div'ın genişliğini ve yüksekliğini% 100'e ayarlamak işe yaramaz.

Ayrıca, div'e ihtiyacımın nedeni, bazı elemanları kesinlikle hücrenin dışına yerleştirmem gerektiğidir ve s position: relativeiçin geçerli değildir td, bu yüzden bir sarıcı div'a ihtiyacım var.

Aşağıdaki kod IE 8, IE 8'in IE 7 uyumluluk modunda ve Chrome'da (başka yerlerde test edilmemiştir) çalışır:

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

Sen bu ayarı orijinal söz söylediği widthve heighthiç100% bana ağır basan diğer bazı kural var olduğundan şüpheleniyorsanız yapar, ama, işi yoktu. Genişlik / yükseklik kurallarının gerçekten uygulanıp uygulanmadığını görmek için Chrome veya Firebug'da hesaplanan stili kontrol ettiniz mi?

Düzenle

Ne kadar aptalım! divMetne, değil boyutlandırma edildi td. Bunu yaparak Chrome'da düzeltebilirsiniz div display:inline-block, ancak IE'de çalışmaz. Bu daha hileli ...

div height = tablo hücresindeki% 100, yalnızca tablonun height özelliğinin kendisi olduğunda çalışır.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

FireFox'ta UPDheight=100% , üst TDöğeye de değer ayarlamanız gerekir

Ve yüksekliğine sahte bir yükseklik ayarlamam gerekiyordu :<tr><td>s

tr vardır height: 1px(yine de yok sayılır)

Sonra td'yi ayarlayın height: inherit

Ardından div öğesini height: 100%

Bu, IE edge ve Chrome'da benim için çalıştı:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Bir tablo hücresinin içinde% 100 div istemenin sebebi, arka plan renginin tam yüksekliğe kadar uzanabilmesi, ancak yine de hücreler arasında boşluk bırakabilmesiydi, <td>kendisine arka plan rengini verebilir ve CSS'yi kullanabilirsiniz Hücreler arasında kenar boşluğu oluşturmak için border-spacing özelliği.

Ancak, gerçekten% 100 yükseklik divine ihtiyacınız varsa, o zaman burada diğerlerinin de belirttiği gibi, ya sabit bir yükseklik atamanız <table>veya Javascript kullanmanız gerekir.

Dolayısıyla, herkes çözümünü gönderdiğinden ve hiçbiri benim için iyi olmadığından, işte benim (Chrome ve Firefox'ta test edildi).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Keman: https://jsfiddle.net/nh6g5fzv/

Diğer tüm tarayıcılar (IE 7, 8 ve 9 dahil) position:relativebir tablo hücresini doğru ve yalnızca Firefox yanlış yaptığından, en iyi seçeneğiniz bir JavaScript şim kullanmaktır. Başarısız bir tarayıcı için DOM'nizi değiştirmeniz gerekmez. IE yanlış bir şey alır ve diğer tüm tarayıcılar doğru olsun İnsanlar her zaman şimler kullanın.

İşte tüm kod açıklamalı bir snippet. JavaScript, HTML ve CSS benim örneğimde duyarlı web tasarım uygulamaları kullanıyor, ancak istemiyorsanız bunu yapmak zorunda değilsiniz. (Duyarlı olması, tarayıcınızın genişliğine uyum sağlaması anlamına gelir.)

http://jsfiddle.net/mrbinky3000/MfWuV/33/

İşte kodun kendisi, ancak bağlam olmadan mantıklı değil, bu yüzden yukarıdaki jsfiddle URL'sini ziyaret edin. (Tam snippet'in hem CSS hem de Javascript'te bolca yorumu vardır.)

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Kullanarak bir çözüm öneriyorum deneysel Flexbox'a için simüle bir hücrenin içerik eleman dikey üst hücresini doldurmak sağlayacak bir tablo düzeni:

gösteri

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

birkaç gün aradıktan sonra bu sorun için olası bir düzeltme anladım.

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

İspanyolca: El truco es establecer la Tabla, el TR y el TD yükseklik: 100%. FireFox ve Chrome ile uyumludur. TD Explorer como block için Internet Explorer desteği. De esta forma Explorer sí toma la altura máxima.

İngilizce açıklama: kod yorumları içinde

eğer <table> <tr> <td> <div>bütün olması height: 100%;ayarlayın, ardından div tüm tarayıcılarda dinamik hücre yüksekliğini dolduracaktır.

Tamam kimse bundan bahsetmedi, bu yüzden bu numarayı göndereceğimi düşündüm:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

taşma: hücre içindeki bu kapsayıcı div otomatik benim için hile yapar. Bu olmadan div tüm yüksekliği kullanmaz.

Tablo hücresi istediğiniz boyutta ise, bu css sınıfını ekleyin ve div'inize atayın:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Tablo hücresinin üst öğeyi de doldurmasını istiyorsanız, sınıfı tablo hücresine de atayın. Umut ediyorum bu yardım eder.

partiye biraz geç ama işte benim çözümüm:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Yorum göndermek için yeterli üne sahip olmadığım için, @Madeorsk ve @ Saadat'ın yaklaşımlarını hafif bir değişiklikle birleştiren tam bir çapraz tarayıcı çözümü eklemek istiyorum! (2/10/2020 tarihinden itibaren Chrome, Firefox, Safari, IE ve Edge'de test edilmiştir)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

Ancak, benden hoşlanıyorsanız, dikey hizalamayı da kontrol etmek istediğinizden ve bu durumlarda flexbox kullanmayı seviyorum:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

En iyi çözümün JavaScript kullanmak olacağını düşünüyorum.

Ancak <td>, hücrelerin dışındaki öğelerin konumlandırılması sorununuzu çözmek için bunu yapmanız gerektiğinden emin değilim . Bunun için böyle bir şey yapabilirsiniz:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Elbette satır içi değil, sınıflar ve kimliklerle.

Yükseklik yapmak için:% 100 iç div için çalışır, ebeveyn td için bir yükseklik ayarlamanız gerekir. Benim özel durumum için yükseklik kullanarak çalıştı:% 100. Bu, iç div yüksekliğini uzattı, ancak tablonun diğer elemanları td'nin çok büyük olmasına izin vermedi. Elbette% 100'den başka değerler kullanabilirsiniz

Tablo hücresinin sabit bir yüksekliğe sahip olmasını istiyorsanız, içeriğe göre (iç div kaydırmasını veya taşmayı gizlemek için) daha büyük hale gelmemesi için, başka js hileleri yapmaktan başka seçeneğiniz yoktur. Üst td'nin göreceli olmayan bir birimde belirtilen yüksekliğe sahip olması gerekir (% değil). Ve büyük olasılıkla js kullanarak bu yüksekliği hesaplamaktan başka seçeneğiniz olmayacaktır. Bu, tablo düzenini de gerektirir: tablo öğesi için sabit stil kümesi

Sık sık benzer sorunlarla karşılaşan ve her zaman sadece kullanmak table-layout: fixed;üzerine tableelemanı ve height: 100%;iç div üzerinde.

Sonunda jQuery kullanmak dışında, tüm tarayıcılarım ve tüm DocTypes / tarayıcı oluşturma modlarında işe yarayacak hiçbir şey bulamadım. İşte benim ortaya koyduğum şey.
Rowspan bile dikkate alınır.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

IE11 (Kenar modu), FF42, Chrome44 + 'da test edilmiştir. İç içe tablolarla test edilmemiştir.

bunu şöyle yapabilirsiniz:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Konumlandırılmış öğenin ve baba öğesinin genişliği ve yüksekliği yoksa,

padding: 0;

baba öğesinde,

Bu muhtemelen önerilmez.

Div'iniz metin içermiyorsa ve düzgün bir arka plana sahipse çalışan bir geçici çözüm buldum.

display: 'list-item'

div'a istenen yükseklik ve genişliği verir, ancak bir liste öğesi madde işaretine sahip olmanın büyük dezavantajı vardır. Div, homojen bir arka plan rengine sahip olduğundan, bu stillerle mermiden kurtuldum:

list-style-position: 'inside',
color: *background-color*,

Ne yapmak istediğinizden emin değilim ama bunu deneyebilirsiniz:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Aşağıdakilerin çalışması gerekir. Üst hücreye bir yükseklik ayarlamanız gerekir. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Bunu dene:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Display: table block'u bir hücrenin içine koymayı deneyin

Burada < div > inside < td > için eski bir CSS hile izlemiyorum . Dolayısıyla ben hatırlatmak: Basit bazı asgari değeri genişliği , ama ne-ihtiyaç için min-width . Örneğin:

<div style="width: 3px; min-width: 99%;">

Bu durumda td'nin genişliği size bağlıdır.

Bu, bir HTML'de% 100 yükseklik ve% 100 genişlik için benim Çözümüm <td>

kodunuzdaki ilk satırı silerseniz düzeltebilirsiniz ...

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

çünkü bu doküman türü bazı dosyalarda% 100'ün içinde% 100 kullanmasına izin vermiyor <td>, ancak bu satırı silerseniz, gövde arka planı% 100 yüksekliğe ve% 100 genişliğe genişletemedi, bu yüzden DOCTYPEsorunu çözdü

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Bu DOCTYPE, vücudunuzdaki arka planı% 100 yükseklik ve% 100 genişlik olarak genişletmenize ve% 100 yükseklik ve% 100 genişliğin tamamını <td>