Зробіть, щоб DIV заповнив всю комірку таблиці

Я це питання бачив і трохи гуглив , але поки що нічого не спрацювало. Я вважаю, що це 2010 рік (ці питання / відповіді старі і, без відповіді), і у нас CSS3! Чи є спосіб отримати div, щоб заповнити ширину та висоту всієї комірки таблиці за допомогою CSS?

Я не знаю, яка ширина та / або висота комірки випереджає час, і встановити ширину та висоту Div на 100% не працює.

Крім того, мені потрібна причина діви в тому, що мені потрібно абсолютно розташувати деякі елементи поза клітиною, і position: relativeне стосується tds, тому мені потрібен обгортковий дів.

Наступний код працює в режимі сумісності IE 7 IE 8 та Chrome (не перевірений в іншому місці):

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

Ви сказали , що в початковому питанні , що установка widthі heightщоб 100%не працювати, хоча, що змушує мене підозрювати , що є деякі інші правила перекриваючи його. Ви перевірили обчислений стиль у Chrome чи Firebug, щоб перевірити, чи дійсно застосовуються правила ширини / висоти?

Редагувати

Який я дурний! Величина divрозміру тексту, а не тексту td. Ви можете виправити це в Chrome, зробивши div display:inline-block, але це не працює на IE. Це доводить складніше ...

div height = 100% у комірці таблиці працюватиме лише тоді, коли таблиця має атрибут висоти.

<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 у FireFox слід також встановити height=100%значення батьківського TDелемента

Мені довелося встановити підроблену висоту на <tr>та висоту: успадкувати для<td>s

tr має height: 1px(все одно ігнорується)

Потім встановіть td height: inherit

Потім встановіть діва на height: 100%

Це працювало для мене в IE edge і 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>

Якщо ви хочете, щоб 100-відсотковий поділ всередині клітинки таблиці полягав у тому, щоб мати можливість фонового кольору поширюватися на повний зріст, але все-таки мати можливість проміжків між клітинками, ви можете надати <td>собі колір фону та використовувати CSS властивість інтервалу інтервалу для створення поля між клітинками.

Однак, якщо вам справді потрібен розділовий наріст висоти 100%, тоді, як згадували інші, вам потрібно призначити фіксовану висоту <table>або використовувати Javascript.

Отож, оскільки всі публікують своє рішення, і жодне було недобре для мене, ось моє (протестовано на Chrome & Firefox).

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

Fiddle: https://jsfiddle.net/nh6g5fzv/

Оскільки кожен інший веб-переглядач (включаючи IE 7, 8 і 9) обробляє position:relativeклітинку таблиці правильно, і лише Firefox помиляється з нею, найкращим варіантом буде використання JavaScript shim. Вам не слід змінювати свій DOM для одного невдалого веб-переглядача. Люди користуються лайками весь час, коли IE отримує щось не так і всі інші браузери розуміють це правильно.

Ось фрагмент із усім кодованим кодом. У моєму прикладі JavaScript, HTML та CSS використовують чуйну практику веб-дизайну, але це не потрібно, якщо ви цього не хочете. (Чуйний означає, що він адаптується до ширини вашого браузера.)

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

Ось сам код, але це не має сенсу без контексту, тому відвідайте URL-адресу jsfiddle вище. (Повний фрагмент також має багато коментарів як у CSS, так і у 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();
    }
});

Я пропоную рішення з використанням експериментальний Flexbox для імітації макета таблиці, який дозволить елементу вмісту комірки вертикально заповнити свою батьківську клітинку:

Демо

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

після кількох днів пошуку я з’ясував можливе виправлення цієї проблеми.

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

Іспанська мова: El truco es establecer la Tabla, el TR y el TD a висота: 100%. Є сумісний сумісний FireFox і Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como block. Пропонується ознайомитись із дослідником.

Англійське пояснення: у коментарях до коду

якщо <table> <tr> <td> <div>всі height: 100%;встановлені, діва заповнює динамічну висоту комірок у всіх браузерах.

Добре ніхто про це не згадував, тому я подумав, що опублікую цей трюк:

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

переповнення: автоматичне використання цього контейнера, діва в комірці, робить для мене трюк. Без нього діва не використовує всю висоту.

Якщо комірка таблиці має потрібний вам розмір, просто додайте цей клас css та призначте його своєму div:

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

Якщо ви хочете, щоб комірка таблиці також заповнювала батьківську, призначте клас і для комірки таблиці. Я сподіваюся, що це допомагає.

трохи запізнився на вечірку, але ось моє рішення:

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

Оскільки мені не вистачає репутації, щоб розмістити коментар, я хочу додати повне рішення для крос-браузера, яке поєднало підходи @Madeorsk та @ Saadat з деякою незначною модифікацією! (Тестовано на Chrome, Firefox, Safari, IE та Edge станом на 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!
} 

Однак якщо ви схожі на мене, ви також хочете контролювати вертикальне вирівнювання, і в цих випадках мені подобається використовувати flexbox:

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

Я думаю, що найкращим рішенням буде використання JavaScript.

Але я не впевнений, що вам потрібно це зробити, щоб вирішити проблему розташування елементів на <td>зовнішній стороні комірки. Для цього ви могли зробити щось подібне:

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

Не в курсі, звичайно, але з класами та ідентифікаторами.

Щоб зробити висоту: 100% робота для внутрішнього діва, ви повинні встановити висоту для батьківського td. Для мого конкретного випадку він працював з використанням висоти: 100%. Це зробило внутрішню висоту Div розтягнутим, тоді як інші елементи таблиці не дозволили td стати занадто великим. Звичайно, ви можете використовувати інші значення, ніж 100%

Якщо ви також хочете, щоб комірка таблиці мала фіксовану висоту, щоб вона не збільшувалась на основі вмісту (щоб внутрішній дів прокручувався або приховував переповнення), тобто тоді у вас немає вибору, але виконайте деякі js-трюки. Батьківський td повинен мати висоту, вказану у відносній одиниці (не%). І вам, швидше за все, не залишиться іншого вибору, окрім як розрахувати цю висоту за допомогою js. Для цього також знадобиться макет таблиці: фіксований стиль для елемента таблиці

Я стикаюся з подібними проблемами часто і завжди використовувати тільки table-layout: fixed;на tableелементі і height: 100%;на внутрішніх справах.

Я в кінцевому підсумку не знайшов нічого, що працювало б у всіх моїх браузерах та всіх DocTypes / режимах візуалізації браузера, за винятком використання jQuery. Отже ось що я придумав.
Він навіть враховує ширину рядків.

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 (Edge mode), FF42, Chrome44 +. Не тестується з вкладеними таблицями.

ви можете це зробити так:

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

Якщо розташований елемент та його батьківський елемент не мають ширини та висоти, тоді встановіть

padding: 0;

в його батьківському стихії,

Це, мабуть, не рекомендується.

Я зрозумів, що вирішення може працювати, якщо ваш div не містить тексту та має рівномірний фон.

display: 'list-item'

дає діву бажану висоту та ширину, але з великим недоліком наявності кулі списку. Оскільки в div є однорідний фоновий колір, я позбувся кулі з такими стилями:

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

Я не впевнений, що ви хочете зробити, але ви можете спробувати це:

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

Наступне має працювати. Ви повинні встановити висоту батьківської комірки. 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>

Спробуйте це:

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

Спробуйте помістити display: блок таблиці всередину комірки

Я не дивлюся тут старий CSS-трюк для < div > inside < td >. Звідси нагадую: просто встановити деяке мінімальне значення для ширини , але те, що вам потрібно для мінімальної ширини . Наприклад:

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

В TD ширина «с, в цьому випадку, це до вас.

Це моє рішення для розширення 100% висоти та 100% ширини в HTML <td>

якщо ви видалите перший рядок у своєму коді, ви можете його виправити ...

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

тому що цей doctype не дозволяє в деяких файлах використовувати 100% відсотків всередині <td>, але якщо ви видалите цю лінію, тіло не вдається розширити фон на 100% висоту і 100% ширину, тому я знайшов це, DOCTYPEщо вирішує проблему

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

цей ДОКТИП дозволяє вам розширити фон у вашому тілі на 100% висоту і 100% ширину, а також ви зможете взяти всі 100% висоти та 100% ширини в <td>