it-swarm.com.ru

Как сделать, чтобы div заполнял всю ячейку таблицы?

Я пытаюсь заполнить центральную ячейку таблицы элементом div. В целях иллюстрации проблемы div оформлен на красном фоне. Кажется, работает в Chrome, но не IE. В приведенной ниже скрипте IE устанавливает высоту div на минимальную высоту, необходимую для содержания его. Разбираясь с этой проблемой с различными настройками CSS, мне удалось заставить IE интерпретировать «height: 100%»; как "высота окна браузера". Однако, как говорится в вопросе, я хочу, чтобы IE интерпретировал его как высоту ячейки td. Есть идеи?

http://jsfiddle.net/UBk79/

CSS:

*{
    padding: 0px;
    margin: 0px;
}
html, body{
    height: 100%;
}
#container{
    height:100%;
    width: 100%;
    border-collapse:collapse;
}
#centerCell{
    border: 1px solid black;
}
#main{
    height: 100%;
    background-color: red;
}

HTML:

<table id="container">
  <tr id="topRow" height="1px">
    <td id="headerCell" colspan="3">
      TOP
    </td>
  </tr>
  <tr id="middleRow">
    <td id="leftCell" width="1px">
      LEFT
    </td>
    <td id="centerCell">
      <div id="main">CENTER</div>
    </td>
    <td id="rightCell" width="1px">
      RIGHT
    </td>
  </tr>
  <tr id="bottomRow" height="1px">
    <td id="footerCell" colspan="3">
      BOTTOM
    </td>
  </tr>
</table>
11
Craig

вы пытались изменить CSS на:

#centerCell{
    border: 1px solid black;
    height:100%;
}

кажется, работает для меня на Edge, Firefox и Chrome

1
cloudpta

Я провел еще несколько исследований по этому вопросу и собрал некоторую информацию, которая может пригодиться другим, пытающимся решить подобные проблемы. Спецификация CSS говорит, что следующие три вещи, которые я считаю важными:

Во-первых, re: указание высоты (деления) в процентах:

Процент рассчитывается относительно высоты содержащего блока сгенерированного блока. Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как 'auto'.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

... высота 'auto' не будет заполнять ячейку, если содержимое не выше минимальной высоты ячейки. Но если мы попытаемся явно установить высоту вмещающей ячейки или строки, мы столкнемся со следующей проблемой:

CSS 2.1 не определяет, как высота ячеек таблицы и строк таблицы рассчитывается, когда их высота указывается с использованием процентных значений.

http://www.w3.org/TR/CSS21/tables.html#height-layout

Поскольку спецификация не определяет его, я думаю, что не слишком удивительно, что Chrome и IE решили рассчитать его по-разному.

В качестве альтернативы (как косвенно указал xec) попытка использовать относительное позиционирование имеет следующую проблему спецификации:

Влияние 'position :lative' на элементы таблицы строк, группы заголовков таблицы, группы нижнего колонтитула таблицы, строки таблицы, группы столбцов таблицы, таблицы-столбца, ячейки таблицы и элементов заголовка таблицы не определено.

www.w3.org/TR/CSS21/visuren.html#propdef-position

Итак, я пришел к выводу вероятно, нет простого способа решения проблемы CSS, который можно разумно ожидать для большинства браузеров.

Сначала я подумал: «Вау, спецификация CSS довольно скудна и неполна, чтобы оставить все это неопределенным». Однако, подумав об этом больше, я понял, что определить спецификацию для этих проблем будет намного сложнее, чем кажется на первый взгляд. В конце концов, высота строки/ячейки рассчитывается как функция высоты их содержимого, и я хочу, чтобы высота моего содержимого была функцией высоты строки/ячейки. Несмотря на то, что у меня есть четко определенный, завершающий алгоритм того, как я хочу, чтобы он работал в моем конкретном случае, не ясно, что алгоритм легко обобщил бы на все другие случаи, которые спецификация должна была бы охватить, не входя в бесконечные циклы.

22
Craig

Просто установите для ячейки таблицы: position:relative и для div:

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

Правка 2017: ДЕМО НИЖЕ: (обратите внимание, что вы не можете видеть красный тд)

#expandingDiv {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: yellow;
}
<table style="width: 120px">
  <tr>
    <td style="background: blue">blue&nbsp;td</td>
    <td style="background: green">green&nbsp;td</td>
  </tr>
  <tr>
    <td style="background: red; position: relative">
      <div id='expandingDiv'> yellow div </div>
    </td>
    <td style="background: orange">
      Some longer text which makes the bottom two tds expand dynamically.
    </td>
  </tr>
</table>

7
cronoklee

Хотя мне понравился ответ Крейга и я не буду использовать подход в этом ответе сам, я довольно далеко продвинулся в этом jsFiddle .

Однако он опирается на взлом: установка height: 1px на столе. Он работает в Chrome, FF, IE11 и Edge (все, что я тестировал), но Chrome начинает плохо себя вести в случаях Edge. Посмотри на скрипку. Вот интересные биты:

table {
    width: 100%;
    /* Whý does this make it work? */
    height: 1px;
}

td {
    border: 10px solid blue;
    height: 100%;
}

#container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 10px solid black;
}

Слишком много неприятного запаха для меня.

2
Peter V. Mørch

Вот jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/

Высота CSS: 100% работает только в том случае, если родительский элемент имеет явно определенную высоту. Этот jQuery устанавливает высоту ячейки таблицы в первом столбце.

<script type="text/javascript">
    $(function(){
    $('.myTable2 tr').each(function(){
    var H1 = $(this).height(); // Get the row height
    $(this).find('td:first').css({'height': H1 + 'px', 'line-height': H1 + 'px'}); //Set td height to row height
    });
});
</script>
0
55cc077