Как сделать высоту <div> fill <td>

Ответ 1

Если вы дадите вашему TD высоту 1px, тогда дочерний div будет иметь родителя с высотой, чтобы вычислить его% from. Поскольку ваше содержимое будет больше, чем 1px, td будет автоматически расти, как и div. Почувствуйте мусор, но я уверен, что это сработает.

Ответ 2

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

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent height */
    height: 100%;
}

Так как кажется, что ваш <td> будет переменной высотой, что, если вы добавили нижний правый значок с абсолютно позиционируемым изображением:

.thatSetsABackgroundWithAnIcon {
    /* Makes the <div> a coordinate map for the icon */
    position: relative;

    /* Takes the full height of its parent <td>.  For this to work, the <td>
       must have an explicit height set. */
    height: 100%;
}

.thatSetsABackgroundWithAnIcon .theIcon {        
    position: absolute;
    bottom: 0;
    right: 0;
}

С разметкой ячейки таблицы следующим образом:

<td class="thatSetsABackground">  
  <div class="thatSetsABackgroundWithAnIcon">    
    <dl>
      <dt>yada
      </dt>
      <dd>yada
      </dd>
    </dl>
    <img class="theIcon" src="foo-icon.png" alt="foo!"/>
  </div>
</td>

Изменить: использование jQuery для установки высоты div

Если вы сохраняете <div> в качестве дочернего элемента <td>, этот фрагмент jQuery будет правильно устанавливать его высоту:

// Loop through all the div.thatSetsABackgroundWithAnIcon on your page
$('div.thatSetsABackgroundWithAnIcon').each(function(){
    var $div = $(this);

    // Set the div height to its parent td height
    $div.height($div.closest('td').height());
});

Ответ 3

Вы можете попробовать сделать свой div float:

.thatSetsABackgroundWithAnIcon{

    float:left;
}

Альтернативно, используйте встроенный блок:

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Рабочий пример метода встроенного блока:

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <div style="border:1px solid red; height:100%; display:inline-block;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

Ответ 4

На этот вопрос уже ответил здесь. Просто поставьте height: 100% как в div, так и в контейнер td.

Ответ 5

Действительно, нужно сделать это с помощью JS. Вот решение. Я не использовал ваши имена классов, но я назвал div внутри имени класса td "full-height":-) Используемый jQuery, очевидно. Обратите внимание, что это вызвано из jQuery (document).ready(function() {setFullHeights();}); Также обратите внимание, если у вас есть изображения, вам придется сначала пропустить их через что-то вроде:

function loadedFullHeights(){
var imgCount = jQuery(".full-height").find("img").length;
if(imgCount===0){
    return setFullHeights();
}
var loaded = 0;
jQuery(".full-height").find("img").load(function(){
    loaded++;
    if(loaded ===imgCount){
        setFullHeights()
    }
});

}

И вместо этого вы хотите вызвать loadFullHeights() из docReady. На самом деле это то, что я использовал на всякий случай. Подумайте, что вы знаете!

function setFullHeights(){
var par;
var height;
var $ = jQuery;
var heights=[];
var i = 0;
$(".full-height").each(function(){
    par =$(this).parent();
    height = $(par).height();
    var tPad = Number($(par).css('padding-top').replace('px',''));
    var bPad = Number($(par).css('padding-bottom').replace('px',''));
    height -= tPad+bPad;
    heights[i]=height;
    i++;
});
for(ii in heights){
    $(".full-height").eq(ii).css('height', heights[ii]+'px');
}

}

Ответ 6

Мой ответ может быть не тем, что вы хотите, но я думаю, что вам нужно вы должны использовать эту структуру:

<table>
    <tr>
        <td class="table-class thatSetsABackground">
            <table border="0" cellpadding="0" cellspacing="0" class="table-class">
            <tr>
                <td class="act-like-your-first-div">
                    //any thing you want
                </td>
                <td class="act-like-your-another-div">
                    //any thing you want
                </td>
            </tr>
            <table>
        </td>  
    </tr>
</table>

и стиль, похожий на

.table-class {
    width: 100%; 
    height: 100%;
    text-align: center;    
}

чтобы вы могли использовать это решение в любой такой проблеме!!!

Ответ 7

Изменить фоновое изображение <td> сам.

Или примените некоторые css к div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}