尝试在Chrome vs FF / IE下实现自动高度div的相同功能

Question

I have noticed a discrepancy between the heights of my divs in Chrome (which looks good) vs FireFox/IE.

Here's my HTML markup (I removed all the other tabs from this just to keep the code clean):

<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%;
}

Here's how it looks under Google Chrome. Note how RightPaneContent expands to fill the entire height of viewport.

Here is how it looks under FireFox. Note how RightPaneContent did not expand to fill the entire viewport:

Does anyone have any advice on what steps I should take to achieve similiar functionality under both environments? Or at least some reading material on what is happening here?

Answer 1

Per CSS spec, height: 100% means the same thing as height: auto if the parent is auto-height. Does your <div id="RightPane"> have a height specified? If not, chances are your page is in quirks mode, and WebKit just violates the standard slightly more in that mode than Gecko does.