Получение div, чтобы занять полную высоту ячейки - PullRequest
Новая
       0

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

5 голосов
/ 21 апреля 2011

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

Установка высоты div = 100% не будет работать, если ячейка таблицы не имеет фиксированной высоты, но я не могу этого сделать, потому что ячейки должны иметь высоту жидкости в зависимости от переменного содержимого.

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

Код ниже, см. Живой пример на http://www.songtricks.com/CellDivBug.html

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

<style type="text/css">

td
{
    padding:0px;
    vertical-align:top;
    height:auto;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

</style>


</head>

<body>

    <table border="1" width="50%">
    <tr>
        <td width="50%">
            <div class="box">
            This box has a lot of text.   This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  This box has a lot of text.  
            </div>
        </td><td width="50%">
            <div class="box">
            This box has a little text.
            </div>
        </td>           
    </tr>
    </table>

</body>
</html>

После нескольких исследований и экспериментов я нашел единственное решение, использующее CSS. Я слишком новичок, чтобы отвечать на свой вопрос, поэтому я публикую его здесь.

В основном состоит из:

  1. Положить положение: относительно ячейки таблицы
  2. Позиционная позиция: абсолютная; верх: 0; Слева направо: 0; право: 0; внизу: 0; на содержащиеся div
  3. Поместите содержимое непосредственно в ячейку, рядом с div, а не внутри нее, чтобы заставить ячейки принимать высоту содержимого

См. Демонстрацию на http://jsfiddle.net/ehLVM/

Ответы [ 3 ]

2 голосов
/ 30 апреля 2011

Не могли бы вы использовать это? Он делает все элементы div с прикрепленной к нему одинаковой высотой. 

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

Источник: http://www.cssnewbie.com/equal-height-columns-with-jquery/

0 голосов
/ 23 апреля 2011

Попробуйте: 

table { height: 100%; }

td
{
    padding:0px;
    vertical-align:top;
    height:100%;
}

.box
{
    margin:0px;
    border:solid 2px red;
    height:100%;
}

Рабочий образец (проверено на FF4)

0 голосов
/ 21 апреля 2011

Гуглил и нашел эту тему на форуме. Кажется, это невозможно сделать с помощью CSS. Но это имеет решение JavaScript. Как предложено в моем комментарии выше, почему бы не переместить CSS границы в тд?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...