100% высота внутри дисплея: ячейка таблицы - PullRequest
Новая
       8

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

4 голосов
/ 31 марта 2012

Я пытаюсь поместить div высотой 100% внутри отображения: div для таблицы-ячейки, но в IE это не работает. Любой обходной путь для IE?

Вот мой код: 

<div style="display:table-row;">
   <div style="display:table-cell; background-color:blue; border-left:solid 1px #CCC;">
       <div style="position:relative; height:100%; width:100%; background-color:red;">
       </div>
   </div>
</div>

Ответы [ 2 ]

2 голосов
/ 27 марта 2013

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

Я использовал немного jQuery. («.column» относится к элементам my: table-cell) 

jQuery(document).ready(function($){
    $('.column').each(function(){
        var $this = $( this )
        $this.height( $this.height() );
    });
});

Это вызывает явную высоту, равную высоте потока, в результате чего мои элементы со 100% высотой в .column фактически соответствуют всей ширине.

Работает в текущих версиях Firefox, Chrome и IE 9.

Редакция: Если вы загружаете изображения в элементах ячейки таблицы, которые будут влиять на высоту, то вместо этого вы захотите запустить приведенный выше код в jQuery (window) .load (). У Chrome есть проблемы с размерами изображения в document.ready. Перемещение вышеуказанного кода .load решило проблему.

.load вызывается после загрузки всех элементов против .ready, которые могут выполняться до загрузки всех элементов (включая изображения)

1 голос
/ 31 марта 2012

высота и ширина родительских элементов устанавливаются автоматически.если вы хотите увидеть красный div, вы инициализируете свои divs высоту и ширину. 

<div style="display: table-row;">
    <div style="display: table-cell; background-color: blue; border-left: solid 1px #CCC;height:20px;width:30px;">
        <div style="position: relative; height: 100%; width: 100%; background-color: red;">

        </div>
    </div>
</div>
...