Wykonaj DIV, wypełniając całą komórkę tabeli

Widziałem to pytanie i trochę googlowałem , ale jak dotąd nic nie zadziałało. Myślę, że teraz jest rok 2010 (te pytania / odpowiedzi są stare i bez odpowiedzi) i mamy CSS3! Czy istnieje sposób, aby za pomocą CSS element div wypełnił całą szerokość i wysokość komórki tabeli?

Nie wiem, jaka będzie szerokość i / lub wysokość komórki, a ustawienie szerokości i wysokości div na 100% nie działa.

Ponadto potrzebuję elementu div, ponieważ muszę bezwzględnie umieścić niektóre elementy poza komórką i position: relativenie ma to zastosowania do tds, więc potrzebuję opakowującego elementu div.

Poniższy kod działa w przeglądarce IE 8, trybie zgodności IE 8 z IE 7 i Chrome (gdzie indziej nie testowano):

<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>

Mówiłeś, że w pierwotnym pytaniu, że ustawienie widthi heightaby 100%nie działał, choć, co sprawia, że podejrzewam, że jest jakaś inna zasada nadpisanie go. Czy sprawdziłeś obliczony styl w Chrome lub Firebug, aby zobaczyć, czy reguły szerokości / wysokości są rzeczywiście stosowane?

Edytować

Jaki jestem głupi! Rozmiar divbył zgodny z tekstem, a nie z td. Możesz to naprawić w Chrome, tworząc div display:inline-block, ale to nie działa w IE. To okazuje się trudniejsze ...

div height = 100% w komórce tabeli zadziała tylko wtedy, gdy tabela ma sam atrybut wysokości.

<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>

UPD w FireFox należy również ustawić height=100%wartość na TDelement nadrzędny

Musiałem ustawić fałszywą wysokość na <tr>i wzrost: dziedziczenie dla<td>s

tr ma height: 1px(i tak jest ignorowane)

Następnie ustaw td height: inherit

Następnie ustaw div na height: 100%

To działało dla mnie w IE Edge i Chrome:

<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>

Jeśli powodem, dla którego chcesz mieć 100% element div wewnątrz komórki tabeli, była możliwość rozciągnięcia koloru tła do pełnej wysokości, ale nadal można mieć odstępy między komórkami, możesz nadać mu <td>kolor tła i użyć CSS border-spacing, aby utworzyć margines między komórkami.

Jeśli jednak naprawdę potrzebujesz elementu div o wysokości 100%, tak jak wspominali inni tutaj, musisz albo przypisać stałą wysokość do elementu div, <table>albo użyć JavaScript.

Tak więc, ponieważ wszyscy publikują swoje rozwiązanie i żadne nie było dla mnie dobre, oto moje (testowane na Chrome i Firefox).

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

Skrzypce: https://jsfiddle.net/nh6g5fzv/

Ponieważ każda inna przeglądarka (w tym IE 7, 8 i 9) position:relativepoprawnie i tylko obsługuje komórkę tabeli Firefox źle to robi, najlepiej jest użyć podkładki JavaScript. Nie powinieneś musieć zmieniać swojego DOM dla jednej nieudanej przeglądarki. Ludzie używają podkładek cały czas, gdy IE coś źle działa, a wszystkie inne przeglądarki robią to dobrze.

Oto fragment kodu z adnotacjami. JavaScript, HTML i CSS wykorzystują w moim przykładzie elastyczne praktyki projektowania stron internetowych, ale nie musisz tego robić, jeśli nie chcesz. (Elastyczny oznacza, że ​​dostosowuje się do szerokości przeglądarki).

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

Oto sam kod, ale bez kontekstu nie ma to sensu, więc odwiedź powyższy adres URL jsfiddle. (Pełny fragment zawiera również wiele komentarzy zarówno w CSS, jak i JavaScript.)

$(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();
    }
});

Proponuję rozwiązanie wykorzystujące eksperymentalny Flexbox do symulacji układu tabeli, który pozwoli elementowi zawartości komórki zapełnić pionowo komórkę nadrzędną:

Próbny

.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>

po kilku dniach wyszukiwania znalazłem możliwe rozwiązanie tego problemu.

 <!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>

Język hiszpański: El truco es establishment la Tabla, el TR y el TD a wysokość: 100%. Esto lo hace kompatybilny z FireFox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. De esta forma Explorer sí toma la altura máxima.

Angielskie wyjaśnienie: w komentarzach do kodu

jeśli <table> <tr> <td> <div>wszystkie zostały height: 100%;ustawione, element div wypełni dynamiczną wysokość komórki we wszystkich przeglądarkach.

Ok, nikt o tym nie wspomniał, więc pomyślałem, że opublikuję tę sztuczkę:

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

przepełnienie: automatyczne włączanie tego elementu div kontenera w komórce załatwia sprawę za mnie. Bez tego element div nie wykorzystuje całej wysokości.

Jeśli komórka tabeli ma żądany rozmiar, po prostu dodaj tę klasę css i przypisz ją do swojego elementu div:

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

Jeśli chcesz, aby komórka tabeli również wypełniała rodzica, przypisz klasę również do komórki tabeli. Mam nadzieję, że to pomoże.

trochę za późno na imprezę, ale oto moje rozwiązanie:

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

Ponieważ nie mam wystarczającej reputacji, aby opublikować komentarz, chcę dodać kompletne rozwiązanie dla różnych przeglądarek, które łączy podejście @Madeorsk i @ Saadat z niewielkimi modyfikacjami! (Testowane w Chrome, Firefox, Safari, IE i Edge na dzień 2.10.2020)

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!
} 

Jeśli jednak jesteś podobny do mnie, to chcesz również kontrolować wyrównanie w pionie, aw takich przypadkach lubię używać flexboksa:

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

Myślę, że najlepszym rozwiązaniem byłoby użycie JavaScript.

Ale nie jestem pewien, czy musisz to zrobić, aby rozwiązać problem umieszczania elementów na <td>zewnątrz komórki. W tym celu możesz zrobić coś takiego:

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

Oczywiście nie w tekście, ale z klasami i identyfikatorami.

Aby wysokość: 100% działało dla wewnętrznego div, musisz ustawić wysokość dla td rodzica. W moim konkretnym przypadku działało przy użyciu wysokości: 100%. To sprawiło, że wewnętrzna wysokość div rozciągnęła się, podczas gdy inne elementy stołu nie pozwoliły, aby td stał się zbyt duży. Możesz oczywiście użyć innych wartości niż 100%

Jeśli chcesz, aby komórka tabeli miała również stałą wysokość, aby nie powiększała się w zależności od zawartości (aby przewinąć wewnętrzny element div lub ukryć przepełnienie), to znaczy, że nie masz wyboru, ale wykonaj kilka sztuczek js. Nadrzędny td będzie musiał mieć wysokość określoną w jednostce nie względnej (nie%). I najprawdopodobniej nie będziesz miał innego wyjścia, jak tylko obliczyć tę wysokość za pomocą js. Wymagałoby to również ustawienia table-layout: fixed style dla elementu table

Często napotykam podobne problemy i zawsze używam po prostu table-layout: fixed;na tableelemencie i height: 100%;na wewnętrznym div.

Ostatecznie nie znalazłem nic, co działałoby we wszystkich moich przeglądarkach i wszystkich trybach renderowania DocTypes / przeglądarki, z wyjątkiem używania jQuery. Oto co wymyśliłem.
Uwzględnia nawet rowspan.

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);

Przetestowano w IE11 (tryb Edge), FF42, Chrome44 +. Nie testowano z tabelami zagnieżdżonymi.

możesz to zrobić tak:

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

Jeśli pozycjonowany element i jego element ojczysty nie mają szerokości i wysokości, ustaw

padding: 0;

w swoim pierwiastku ojczystym,

To prawdopodobnie nie jest zalecane.

Znalazłem obejście, które działa, jeśli Twój element div nie zawiera tekstu i ma jednolite tło.

display: 'list-item'

nadaje elementowi div żądaną wysokość i szerokość, ale z dużym minusem wypunktowania elementu listy. Ponieważ element div ma jednolity kolor tła, pozbyłem się punktora w tych stylach:

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

Nie jestem pewien, co chcesz zrobić, ale możesz spróbować tego:

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

Poniższe powinny działać. Musisz ustawić wysokość komórki nadrzędnej. 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>

Spróbuj tego:

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

Spróbuj umieścić blok display: table wewnątrz komórki

Nie oglądam tutaj starej sztuczki CSS dla < div > inside < td >. Dlatego przypominam: po prostu ustaw jakąś minimalną wartość szerokości , ale czego potrzebujesz dla minimalnej szerokości . Na przykład:

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

W takim przypadku szerokość td zależy od Ciebie.

To jest moje rozwiązanie na rozszerzenie 100% wysokości i 100% szerokości w html <td>

jeśli usuniesz pierwszą linię w kodzie, możesz to naprawić ...

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

ponieważ ten typ dokumentu nie zezwala w niektórych plikach na użycie 100% procent wewnątrz <td>, ale jeśli usuniesz tę linię, treść nie rozszerza tła do 100% wysokości i 100% szerokości, więc znalazłem to, DOCTYPEco rozwiązuje problem

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

ten DOCTYPE pozwala ci rozszerzyć tło w twoim ciele na 100% wysokości i 100% szerokości, i pozwala ci wziąć wszystkie 100% wysokości i 100% szerokości do <td>