Как сделать <div> fill <td> height


103

Я просмотрел несколько сообщений на StackOverflow, но не смог найти ответа на этот довольно простой вопрос.

У меня есть такая HTML-конструкция:

<table>
  <tr>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
    <td class="thatSetsABackground">
      <div class="thatSetsABackgroundWithAnIcon">
        <dl>
          <dt>yada
          </dt>
          <dd>yada
          </dd>
        </dl>
      <div>
    </td>
  </tr>
</table>

Что мне нужно, так это divзаполнить высоту элемента td, чтобы я мог разместить фон div (значок) в правом нижнем углу файла td.

Как вы предлагаете мне это сделать?


Ответы:


186

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


7
Хотя кажется, что в webkit он работает нормально, IE9 полностью ломается.
Daniel Imms

Работайте для меня в IE11 только тогда, когда я также устанавливаю div на встроенный блок. Благодарность!
Дэнни Си,

6
Вот решение, которое также работает в Firefox: stackoverflow.com/questions/36575846/…
Wouter

Чтобы он работал как в Firefox, так и в Chrome, мне пришлось использовать min-height: 1px;вместоheight: 1px;
Мэтт Леонович

🤯 Я не уверен, нравится мне CSS или ненавижу его
noob

36

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

td {
    height: 200px;
}

td div {
    /* div will now take up full 200px of parent's 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's height to its parent td's height
    $div.height($div.closest('td').height());
});

Это могло сработать. Позвольте мне вернуться к вам, когда я попытаюсь. Я прочитал эту тему и понял, что <div> нужна указанная высота, чтобы иметь возможность масштабироваться до 100%. Из того, что я читал, это можно было сделать с помощью jQuery, поскольку он может рассчитать это за меня.

2
Я не особо хорошо работал, и мы выбрали другой подход. Но я приму твой ответ, потому что он лучший.

3
Ха, если бы у меня был доллар столько раз, сколько раз CSS заставлял меня менять мой подход :)
Пэт

5
Неужели я единственный, кто считает, что «CSS height: 100% работает, только если родительский элемент имеет явно заданную высоту» - это действительно глупое правило? Браузер все равно определяет высоту родительского элемента; нет никакого способа , вы должны явно установить высоту родительского элемента.
Jez

1
решение jquery сработало только тогда, когда я поместил его в конец файла, спасибо
luke_mclachlan

4

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

.thatSetsABackgroundWithAnIcon{

    float:left;
}

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

.thatSetsABackgroundWithAnIcon{

    display:inline-block;
}

Рабочий пример метода 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>


Предложение float: left, похоже, не работает. Этот ответ можно улучшить, удалив его, поскольку второе упомянутое решение, похоже, работает.
Wouter

1
В Firefox этого не происходит. Вроде работает только с Chrome.
YLombardi,

8
Этот фрагмент также не работает в Chromium, по крайней мере, в настоящее время (я использую 63.0.3239.84).
Майкл

0

На самом деле нужно делать это с помощью 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()
    }
});

}

И вместо этого вы захотите вызвать loadedFullHeights () из 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');
}

}



-4

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

Или примените CSS к div:

.thatSetsABackgroundWithAnIcon{
    height:100%;
}

как я пишу в коде. У TD уже есть фоновое изображение, установленное с помощью класса. Так что этот вариант нежизнеспособен. Я попытался установить высоту div на 100%, но это не сработало. Он просто переносится на переменную высоту содержащегося <dl>. Так что нужно что-то, чтобы div «понял», что он должен заполнять высоту. И высота: 100% этого не делает. (не только по крайней мере)
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.