Почему мой элемент display: table-cell не заполняет доступное пространство?

Обновление - я отказался от решения JavaScript. Единственный способ убедиться, что он всегда работает, — поместить его в setInterval()каждые несколько секунд. Не хочу этого делать. Я знаю, что этот CSS возможен, я видел, как он работает. Я снова открою награду еще на 150, если она закончится.


У меня есть модальное всплывающее окно, состоящее из двух секций: левой и правой. В обоих разделах есть метка вверху и содержимое внизу. Метка фиксируется на определенном количестве пикселей, но нижняя область должна заполнять оставшееся пространство, поэтому я использую display:tableслева и справа и display : table-cellво внутренних разделах для достижения эффекта «заполнения оставшегося пространства». Он отлично работает в Chrome и Safari.

Вот CSS:

#tagBoxLeft,#tagBoxRight {
    display: table;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
    display: table-row;
    -webkit-border-top-left-radius: 20px;
    width: 100%;
    word-break: break-all;
    word-wrap: break-word;
    -webkit-box-shadow: 0 1px 0 #FFF;
    -moz-box-shadow: 0 1px 0 #FFF;
    box-shadow: 0 1px 0 #FFF;
}
.nano {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: table-cell;
}
#taglabel {
    display: table-row;
    z-index: 10000;
    border-top: 1px solid #FFF;
    width: 100%;
    height: 39px;
}

И он просто превращает группу div в таблицу, чтобы они могли иметь высоту, относительную друг к другу. Также обратите внимание, что левая и правая стороны относятся к окну браузера, поэтому я не могу просто использовать проценты.

Однако в Firefox и Opera боковые секции #tagBoxLeftи #tagBoxRightотказываются принимать height:100%;, хотя они имеют дисплей:таблица;. Таким образом, это не заставит нижние разделы реагировать. Я знаю, что Firefox и Opera обычно поддерживают это (см. http://jsfiddle.net/Qxswa/). Но почему весь мой контент переполняется в Firefox и Opera?

Вот скриншот проблемы:

enter image description here

10
задан TylerH 16 February 2018 в 20:54
поделиться