CSS - макет ячейки таблицы превышает высоту в Firefox/IE

Учитывая следующий код

<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100%">
            <div style="height:100%;background:yellow;overflow-y:auto">CONTENT
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
            </div>
        </div>
    </div>
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100px">
            <div>INPUT</div>
        </div>
    </div>
</div>

Chrome correctly sizes the CONTENT area by the available size for the table cell while Firefox and IE increase the size of the table cell to fit the content. How can I make FF/IE behave like Chrome?

Пример в Fiddle: http://jsfiddle.net/2p6Jx/

ОБНОВЛЕНИЕ: я не могу использовать фиксированную высоту, таблица должна меняться в соответствии с высотой и шириной родительского элемента.

Обновление 2: добавление display:-moz-stack решило проблему в FF, теперь это просто IE (http://jsfiddle.net/2p6Jx/3/)


web html css css-tables
person Shlomi Schwartz    schedule 09.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я меняю ваш код, и он работает в IE/FF/chrome.

<div style="border:solid 5px orange;width:400px;height:400px">
    <div style="display:table;border:solid 1px red;width:100%;height:100%">
       <div style="display:table-row;height:300px;width:100%;">
            <div style="display:table-cell;">
                <div style="background:yellow;overflow-y:auto;height:300px;">
                    CONTENT
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
                </div>
            </div>
       </div>
        <div style="display:table-row;height:100px;width:100%;">
            <div style="display:table-cell;border:solid 1px green;height:100px">
                <div>INPUT</div>
            </div>
        </div>
    </div>
</div>
person Mohammad Abbasi    schedule 09.03.2014
comment
Спасибо за ответ, но мне нужно избегать фиксированной высоты. Я обновлю свой вопрос. - person Shlomi Schwartz; 09.03.2014
comment
У вас есть другая идея? :) - person Shlomi Schwartz; 09.03.2014