Обновление - я отказался от решения 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?
Вот скриншот проблемы: