Попытка добиться той же функциональности для автоматических высот div в Chrome vs FF / IE

Question

Я заметил несоответствие между высотами моих div в Chrome (что выглядит неплохо) по сравнению с FireFox / IE.

Вот моя HTML-разметка (я удалил все остальные вкладки, чтобы сохранить код в чистоте):

<div id="RightPane">
    <div id="RightPaneContent">
        <ul>
            <li><a href="#tabs-6">Plan View</a></li>
        </ul>
        <div id="tabs-6">
            <%= Html.Partial("PlanViewTab", Model) %>
        </div>
    </div>
</div>

#RightPaneContent
{
    min-width: 433px;
    height: 100%;
}

Вот как это выглядит под Google Chrome. Обратите внимание, как RightPaneContent расширяется, чтобы заполнить всю высоту области просмотра.

Вот как это выглядит под FireFox. Обратите внимание, что RightPaneContent не расширяется, чтобы заполнить весь видовой экран:

Есть ли у кого-нибудь совет о том, какие шаги я должен предпринять для достижения аналогичной функциональности в обеих средах? Или хоть какой-нибудь материал для чтения о том, что здесь происходит?

Answer 1

Согласно спецификации CSS, height: 100% означает то же самое, что и height: auto, если родительский объект имеет автоматическую высоту. У вашего <div id="RightPane"> указана высота? Если нет, скорее всего, ваша страница находится в режиме причуд, и WebKit просто нарушает стандарт в этом режиме чуть больше, чем Gecko.