Сделать DIV заполнить всю ячейку таблицы

Я видел этот вопрос и немного погуглил , но пока ничего не получалось. Я полагаю, что сейчас 2010 год (эти вопросы / ответы старые и, ну, без ответа), и у нас есть CSS3! Есть ли способ получить div для заполнения ширины и высоты ячейки таблицы с помощью CSS?

Я не знаю, какая ширина и / или высота ячейки будет опережать время, и установка ширины и высоты div на 100% не работает.

Кроме того, причина, по которой мне нужен элемент div, заключается в том, что мне нужно расположить некоторые элементы вне ячейки, и position: relativeэто не относится к элементу tds, поэтому мне нужен элемент div.

Следующий код работает с IE 8, режимом совместимости IE 7 с IE 7 и 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 высота = 100% в ячейке таблицы будет работать, только если у таблицы есть атрибут height.

<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(игнорируется в любом случае)

Затем установите тд height: inherit

Затем установите div в height: 100%

Это работает для меня в IE края и 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. свойство border-spacing для создания поля между ячейками.

Однако, если вам действительно нужен div на 100% высоты, то, как уже упоминали другие, вам нужно либо назначить фиксированную высоту, <table>либо использовать Javascript.

Итак, поскольку все публикуют свое решение, и ни одно из них не подходит для меня, вот мое (проверено на Chrome и Firefox).

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

Скрипка: https://jsfiddle.net/nh6g5fzv/

Поскольку любой другой браузер (включая IE 7, 8 и 9) position:relativeкорректно обрабатывает ячейку таблицы, и только Firefox ошибается, лучшим вариантом будет использование JavaScript-прокладки. Вам не нужно менять 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, рост: 100%. Esto lo hace совместимый с FireFox и Chrome. Обозреватель Internet Explorer, объединяющий блок TD Como. De Forforma Исследователь с Тома Альтурс Максима.

Английское объяснение: в комментариях к коду

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

Хорошо, никто не упомянул об этом, поэтому я решил опубликовать этот трюк:

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

Переполнение: auto для этого контейнера div внутри ячейки помогает мне. Без этого div не использует всю высоту.

Если ячейка таблицы имеет нужный размер, просто добавьте этот класс 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>

Не inline, конечно, но с классами и идентификаторами.

Чтобы высота: 100% работала для внутреннего элемента div, вы должны установить высоту для родительского элемента td. Для моего конкретного случая это работало с использованием высоты: 100%. Это увеличило внутреннюю высоту div, в то время как другие элементы таблицы не позволяли тд становиться слишком большим. Конечно, вы можете использовать другие значения, кроме 100%

Если вы также хотите, чтобы ячейка таблицы имела фиксированную высоту, чтобы она не увеличивалась в зависимости от содержимого (чтобы сделать внутреннюю прокрутку div или скрыть переполнение), то есть, когда у вас нет выбора, кроме как выполнить некоторые трюки js. У родительского td должна быть высота, указанная в не относительной единице (не%). И, скорее всего, у вас не будет другого выбора, кроме как рассчитать эту высоту, используя js. Для этого также понадобится макет таблицы: фиксированный набор стилей для элемента таблицы.

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

В конечном итоге я не нашел ничего, что могло бы работать во всех моих браузерах и во всех режимах рендеринга DocTypes / browser, кроме использования 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 желаемую высоту и ширину, но с большим недостатком наличия маркера элемента списка. Поскольку у 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>

Попробуйте поместить дисплей: блок таблицы внутри ячейки

Я не смотрю здесь старый CSS-трюк для < div > внутри < 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">

потому что этот тип документа не позволяет в некоторых файлах использовать 100% внутри <td>, но если вы удалите эту строку, тело не сможет расширить фон до 100% высоты и 100% ширины, поэтому я обнаружил, DOCTYPEчто это решает проблему

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

этот DOCTYPE позволяет вам увеличить фон в вашем теле до 100% высоты и 100% ширины, и вы можете взять все 100% высоты и 100% ширины в <td>