Обновление - я решил отказаться от решения 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;
}
И это просто делает кучу divs в таблицу, чтобы они могли иметь высоты, которые относительно друг друга. Также обратите внимание, что левая и правая стороны относятся к окну браузера, поэтому я не могу просто использовать проценты.
Однако в Firefox и Opera секции сторон #tagBoxLeft
и #tagBoxRight
отказываются принимать height:100%;
, пока они имеют display:table;
. Поэтому он не будет приводить в действие нижние разделы. Я знаю, что Firefox и Opera поддерживают это нормально (см. http://jsfiddle.net/Qxswa/). Но почему все мое содержимое переполняется в Firefox и Opera?
Вот скриншот проблемы: